Tailwind CSS Login Page

This project demonstrates a modern login interface built with Tailwind CSS v4. It showcases various Tailwind features including gradients, animations, shadows, and custom styling.

Demo Preview

The project contains a stylish login form with:

• Gradient background
• Animated "Login" text
• Custom input styling
• Responsive design
• Modern shadow and border effects

Getting Started

Prerequisites

• Node.js (latest LTS version recommended)
• npm or yarn

Installation

1. Clone this repository or download the files
2. Install the dependencies:

   npm install
   # or
   yarn install

Running the Project

To start the development server:

npm run watch
# or
yarn watch

Building the CSS

The project uses Tailwind CSS CLI to build the styles:

npm run build
# or
yarn build

Project Structure

• index.html - The login page HTML structure
• input.css - The CSS entry point that imports Tailwind
• styles.css - The compiled Tailwind output (don't edit directly)
• package.json - Project dependencies and scripts

Features

• Modern Design: Clean, minimalist login form with smooth visual effects
• Tailwind v4: Using the latest Tailwind CSS version with its new features
• Customizable: Easy to modify using Tailwind's utility classes
• Responsive: Works well on different screen sizes
• Optimized: Built with performance in mind

Customization

To customize the styles:

• Edit the HTML classes directly in index.html
• For more advanced customization, you can create a Tailwind configuration file

License

This project is available for personal and commercial use.

Acknowledgments

• Tailwind CSS for the excellent CSS framework
• Built with Tailwind CSS v4.0.12