Tailwind CSS Landing Pages

Explore a collection of responsive landing pages crafted while mastering Tailwind CSS, showcasing utility-first design, responsive layouts, and modern web development techniques. Each project is organized in its own directory, highlighting different layouts and design patterns.

Projects

clipboard

• Description: A clean, responsive portfolio page featuring a hero section, about me, and project showcase.
• Live Demo: View Live
• Technologies: HTML, Tailwind CSS
• Features: Responsive grid, hover effects, mobile-first design, custom Tailwind config, responsive typography

Login modal

• Description: A modern responsive, clean looking login form.
• Live Demo: View Live
• Technologies: HTML, Tailwind CSS
• Features: CSS Grid, custom Tailwind config, responsive typography

Email subscribe

• Description: A product-focused landing page with a hero banner, product cards, and a pricing section.
• Live Demo: View Live (Replace with your deployed URL)
• Technologies: HTML, Tailwind CSS
• Features: Flexbox layout

Pricing grids

• Description: A modern price section of a webpage.
• Live Demo: View Live (Replace with your deployed URL)
• Technologies: HTML, Tailwind CSS
• Features: CSS Grid, custom Tailwind config, responsive typography

Product modal

• Description: A simple product description modal.
• Live Demo: View Live (Replace with your deployed URL)
• Technologies: HTML, Tailwind CSS
• Features: CSS Grid, css animation

Getting Started

To run any project locally:

• Clone the repository:

git clone https://github.com/NueloSE/tailwind-projects.git

• Navigate to a project directory (e.g., cd clipboard). If using Tailwind CLI or a build tool: Install dependencies:

npm install

• Build CSS:

npx tailwindcss -i ./input.css -o ./css/styles.css --watch

• Open index.html in a browser or use a local server (e.g. live-server).

Setup for Development

• Tailwind CSS: You can use the Tailwind CSS CDN for simplicity or a build setup, Tailwind is configured via tailwind.config.js.
• Prerequisites: Node.js (if using Tailwind CLI), a modern browser.

Learning Journey

These projects were inspired by Traversy Media’s Tailwind-course-project and the official Tailwind CSS documentation. Key learnings include:

• Mastering utility-first CSS with Tailwind’s classes.
• Implementing responsive design with sm:, md:, lg: prefixes.
• Rewriting Tailwind via configuration for unique designs.

Feedback

Feel free to explore the projects and share feedback!

Connect with me on - X - or open an issue/PR in this repo.