Tailwind Projects

Beginners To Experts

The site is under development.

Tailwind Projects

Steps to Run Tailwind Projects Using CDN (No Build Tools Needed)

  1. Step 1: Create a Folder
    Make a new folder on your desktop or in your desired directory, e.g., tailwind-projects.

  2. Step 2: Create an HTML File
    Inside the folder, create a file named index.html (or any name).

  3. Step 3: Add Basic HTML Structure
    Add this basic HTML skeleton: 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Project</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">

  <!-- Your Tailwind code will go here -->

</body>
</html>

  4. Step 4: Copy & Paste Code
    From the relevant accordion (Project 1 to 5), copy the code from the <pre> section.
    Paste it inside the <body> tag.

  5. Step 5: Save and Open in Browser
    Save the HTML file and double-click it, or right-click and choose Open With > Your Browser.

  6. Step 6: Optional - Customize
    You can edit the text, colors, layout, and classes inside the file to personalize your project.

  7. Step 7: Make More Projects
    You can duplicate index.html into project2.html, project3.html, etc. to organize each project in a separate file.

You Now Have a Working Tailwind Project Without Any Build Process!

Folder Structure Example:

tailwind-projects/
├── index.html
├── project2.html
├── project3.html
└── assets/
    └── phone.png (if used)

Note:

  • Alway have

    <script src="https://cdn.tailwindcss.com"></script>

    in your HTML file for running Tailwind Projects
  • This method works 100% offline after first CDN load.
  • No need to install Node.js, npm, or build Tailwind manually.
  • Use Chrome, Edge, Firefox, or Safari to test output.

Responsive Tailwind CSS Features Explained

Tailwind CSS is built mobile-first and provides a powerful, easy-to-use responsive design system using breakpoint prefixes.

1. Mobile-first Breakpoints

Tailwind defines default breakpoints for responsiveness:

  • sm: 640px and above
  • md: 768px and above
  • lg: 1024px and above
  • xl: 1280px and above
  • 2xl: 1536px and above

You apply responsive styles by prefixing utilities with these breakpoints, e.g., md:text-left applies left text alignment on medium screens and larger.

2. How to Use Responsive Prefixes

Write your base styles first (for mobile), then add breakpoint prefixes for larger screens: 


<div class="text-center md:text-left p-4">
  Responsive text alignment!
</div>

Here, the text is centered on small screens, and left aligned on medium and larger.

3. Responsive Grid and Flex Utilities

Tailwind allows responsive layouts using grid and flexbox with responsive prefixes: 


<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <div class="bg-blue-300 p-4">Item 1</div>
  <div class="bg-blue-500 p-4">Item 2</div>
  <div class="bg-blue-700 p-4">Item 3</div>
</div>

This grid shows 1 column on mobile, 3 columns on medium and larger screens.

4. Responsive Spacing (Margin, Padding)

You can control spacing responsively: 


<div class="p-2 sm:p-4 md:p-6 lg:p-8">
  Responsive padding!
</div>

Padding increases as the screen size grows.

5. Responsive Typography

Change font sizes responsively: 


<p class="text-base sm:text-lg md:text-xl lg:text-2xl">
  Responsive font size!
</p>

6. Responsive Display and Visibility

Show/hide elements at different breakpoints using hidden and block: 


<div class="block md:hidden">Visible on small screens</div>
<div class="hidden md:block">Visible on medium+ screens</div>

7. Responsive Positioning and Sizing

Control width, height, position responsively: 


<img class="w-24 sm:w-32 md:w-48 lg:w-64" src="image.jpg" alt="Responsive image">

8. Responsive Borders and Colors

Change borders, colors responsively: 


<button class="border border-gray-500 sm:border-blue-500 md:border-green-500">Button</button>

9. Responsive Hover and Focus States

Combine hover/focus with responsive: 


<button class="bg-gray-300 sm:bg-blue-300 hover:bg-blue-500 focus:ring-4 focus:ring-blue-300">Click me</button>

10. Customizing Responsive Breakpoints

Tailwind allows customizing breakpoints in tailwind.config.js so you can add or adjust screen sizes.

By combining all these responsive utilities and breakpoints, you can create fully responsive, performant, and maintainable UI designs easily with Tailwind CSS.

Steps to Run (Pure Tailwind)

  1. Install Tailwind via CDN or npm.
  2. Create an HTML file (e.g., index.html).
  3. Paste the code below inside <body>.
  4. Open the file in your browser.
<div class="min-h-screen bg-gray-50 p-10 text-center">
  <h1 class="text-4xl font-bold text-blue-600">Your SaaS Solution</h1>
  <p class="mt-4 text-gray-600">Modern tools to power your productivity.</p>
  <button class="mt-6 px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
    Get Started
  </button>
</div>

Steps to Run (Pure Tailwind)

  1. Use Tailwind CDN or build from source.
  2. Include a phone mockup image in your assets folder.
  3. Paste the HTML into your file and open in browser.
<div class="min-h-screen bg-white text-center p-10">
  <h2 class="text-3xl font-semibold">Download Our App</h2>
  <p class="text-gray-500 mt-2">Your life, simplified.</p>
  <div class="mt-6">
    <img src="assets/phone.png" alt="Phone" class="mx-auto w-40">
    <a href="#" class="mt-4 inline-block bg-green-500 text-white px-5 py-2 rounded-lg">
      Download for Android
    </a>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Install Tailwind via CDN or npm.
  2. Create a portfolio.html file.
  3. Paste the following HTML code.
  4. Open it in a browser.
<div class="p-10 bg-gray-900 text-white min-h-screen">
  <h1 class="text-4xl font-bold">Jane Doe</h1>
  <p class="text-gray-400">Web Developer & Designer</p>
  <div class="mt-6">
    <a href="#" class="bg-blue-600 px-4 py-2 rounded-lg">Contact Me</a>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Use Tailwind via CDN.
  2. Save the HTML as resume.html.
  3. Edit sections to match your personal details.
<div class="p-10 bg-white min-h-screen">
  <h1 class="text-3xl font-bold text-gray-800">John Smith</h1>
  <p class="text-gray-600">Frontend Developer | JavaScript, React, Tailwind</p>
  <hr class="my-4">
  <h2 class="text-xl font-semibold">Experience</h2>
  <ul class="list-disc ml-6 mt-2 text-gray-700">
    <li>Senior Dev at ABC Corp</li>
    <li>Freelancer - 50+ Projects</li>
  </ul>
</div>

Steps to Run (Pure Tailwind)

  1. Set up Tailwind via CDN or npm.
  2. Use an HTML form for sign-ups.
  3. Submit to a Google Form, Formspree, or back-end handler.
<div class="p-10 bg-blue-50 min-h-screen text-center">
  <h2 class="text-3xl font-bold">Join Our Free Webinar!</h2>
  <p class="text-gray-600 mt-2">Learn the secrets of marketing success.</p>
  <form class="mt-6 max-w-md mx-auto">
    <input type="email" placeholder="Your email" class="w-full p-2 rounded border border-gray-300 mb-4">
    <button class="bg-blue-600 text-white px-4 py-2 rounded">Sign Up</button>
  </form>
</div>

E-commerce UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Listing</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">

  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold mb-4">Products</h1>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div class="md:col-span-1">
        <!-- Filters -->
        <h2 class="text-xl font-semibold mb-2">Filters</h2>
        <div class="space-y-2">
          <label class="block">
            <input type="checkbox" class="mr-2" /> On Sale
          </label>
          <label class="block">
            <input type="checkbox" class="mr-2" /> In Stock
          </label>
        </div>
      </div>

      <div class="md:col-span-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Product Card -->
        <div class="bg-white rounded-lg shadow-md p-4">
          <img src="https://via.placeholder.com/150" class="w-full h-40 object-cover mb-2" />
          <h3 class="text-lg font-bold">Product 1</h3>
          <p class="text-gray-600">$29.99</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-4">
          <img src="https://via.placeholder.com/150" class="w-full h-40 object-cover mb-2" />
          <h3 class="text-lg font-bold">Product 2</h3>
          <p class="text-gray-600">$39.99</p>
        </div>
        <div class="bg-white rounded-lg shadow-md p-4">
          <img src="https://via.placeholder.com/150" class="w-full h-40 object-cover mb-2" />
          <h3 class="text-lg font-bold">Product 3</h3>
          <p class="text-gray-600">$49.99</p>
        </div>
      </div>
    </div>
  </div>

</body>
</html>
      

<div class="max-w-5xl mx-auto p-4">
  <div class="flex flex-col md:flex-row gap-6">
    <div class="w-full md:w-1/2">
      <img src="https://via.placeholder.com/400" alt="Product Image" class="rounded shadow-lg">
    </div>
    <div class="w-full md:w-1/2 space-y-4">
      <h1 class="text-3xl font-bold">Elegant Leather Shoes</h1>
      <p class="text-gray-600">Premium leather shoes perfect for formal events or office wear.</p>
      <p class="text-xl font-semibold text-green-700">$129.99</p>
      <div class="flex gap-2">
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Add to Cart</button>
        <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded hover:bg-gray-300">Wishlist</button>
      </div>
      <ul class="list-disc list-inside text-sm text-gray-500">
        <li>100% Genuine Leather</li>
        <li>Available in multiple sizes</li>
        <li>Free shipping & returns</li>
      </ul>
    </div>
  </div>
</div>
      

<div class="max-w-4xl mx-auto p-4">
  <h2 class="text-2xl font-bold mb-4">Shopping Cart</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full bg-white border border-gray-200 rounded-md">
      <thead>
        <tr class="bg-gray-100">
          <th class="py-2 px-4 border-b">Product</th>
          <th class="py-2 px-4 border-b">Price</th>
          <th class="py-2 px-4 border-b">Quantity</th>
          <th class="py-2 px-4 border-b">Total</th>
          <th class="py-2 px-4 border-b">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr class="text-center">
          <td class="py-3 px-4 border-b flex items-center gap-4">
            <img src="https://via.placeholder.com/50" alt="Product" class="w-12 h-12 rounded">
            <span>Leather Shoes</span>
          </td>
          <td class="py-3 px-4 border-b">$129.99</td>
          <td class="py-3 px-4 border-b">
            <input type="number" min="1" value="1" class="w-16 border rounded px-2 py-1 text-center">
          </td>
          <td class="py-3 px-4 border-b">$129.99</td>
          <td class="py-3 px-4 border-b">
            <button class="text-red-600 hover:text-red-800">Remove</button>
          </td>
        </tr>
        <tr class="text-center">
          <td class="py-3 px-4 border-b flex items-center gap-4">
            <img src="https://via.placeholder.com/50" alt="Product" class="w-12 h-12 rounded">
            <span>Canvas Backpack</span>
          </td>
          <td class="py-3 px-4 border-b">$59.99</td>
          <td class="py-3 px-4 border-b">
            <input type="number" min="1" value="2" class="w-16 border rounded px-2 py-1 text-center">
          </td>
          <td class="py-3 px-4 border-b">$119.98</td>
          <td class="py-3 px-4 border-b">
            <button class="text-red-600 hover:text-red-800">Remove</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="flex justify-end mt-4 space-x-4">
    <span class="text-xl font-semibold">Total: $249.97</span>
    <button class="bg-green-600 text-white px-5 py-2 rounded hover:bg-green-700">Checkout</button>
  </div>
</div>
      

<div class="max-w-md mx-auto p-6 bg-white rounded shadow-md">
  <h2 class="text-2xl font-bold mb-6 text-center">Checkout</h2>

  <form class="space-y-4">
    <div>
      <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
      <input type="text" id="name" name="name" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>

    <div>
      <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
      <input type="email" id="email" name="email" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>

    <div>
      <label for="address" class="block text-sm font-medium text-gray-700">Address</label>
      <input type="text" id="address" name="address" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>

    <div>
      <label for="card" class="block text-sm font-medium text-gray-700">Card Number</label>
      <input type="text" id="card" name="card" maxlength="19" placeholder="1234 5678 9012 3456" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
    </div>

    <div class="flex space-x-4">
      <div class="flex-1">
        <label for="expiry" class="block text-sm font-medium text-gray-700">Expiry Date</label>
        <input type="text" id="expiry" name="expiry" placeholder="MM/YY" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
      </div>
      <div class="flex-1">
        <label for="cvv" class="block text-sm font-medium text-gray-700">CVV</label>
        <input type="text" id="cvv" name="cvv" maxlength="4" placeholder="123" required class="mt-1 block w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
      </div>
    </div>

    <button type="submit" class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700">Pay Now</button>
  </form>
</div>
      

<div class="max-w-md mx-auto p-6 bg-white rounded shadow-md text-center">
  <h2 class="text-3xl font-bold mb-4 text-green-600">Thank You!</h2>
  <p class="mb-6 text-gray-700">Your order has been successfully placed.</p>

  <div class="bg-gray-100 p-4 rounded-md">
    <p class="font-semibold">Order Number: <span class="text-indigo-600">#123456</span></p>
    <p class="mt-2">Estimated Delivery: <span class="font-semibold">3-5 business days</span></p>
  </div>

  <button onclick="window.location.href='/'" class="mt-6 bg-indigo-600 text-white px-5 py-2 rounded hover:bg-indigo-700">Back to Home</button>
</div>

Authentication UI

Steps to Run (Pure Tailwind)

  1. Include Tailwind CSS via CDN in your HTML head.
  2. Create login.html file.
  3. Paste code below inside <body>.
  4. Open the file in a browser.
<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded shadow-md w-full max-w-sm">
    <h2 class="text-2xl font-bold text-center mb-4">Login</h2>
    <input type="email" placeholder="Email" class="w-full p-2 border rounded mb-3">
    <input type="password" placeholder="Password" class="w-full p-2 border rounded mb-4">
    <button class="w-full bg-blue-600 text-white py-2 rounded">Login</button>
    <div class="mt-4 text-center text-sm text-gray-500">Or login with:</div>
    <div class="flex justify-around mt-3">
      <button class="bg-red-500 text-white px-4 py-2 rounded">Google</button>
      <button class="bg-blue-800 text-white px-4 py-2 rounded">Facebook</button>
    </div>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Include Tailwind CDN in your HTML file.
  2. Save the content below in register.html.
<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded shadow-md w-full max-w-sm">
    <h2 class="text-2xl font-bold text-center mb-4">Sign Up</h2>
    <input type="text" placeholder="Name" class="w-full p-2 border rounded mb-3">
    <input type="email" placeholder="Email" class="w-full p-2 border rounded mb-3">
    <input type="password" placeholder="Password" class="w-full p-2 border rounded mb-4">
    <button class="w-full bg-green-600 text-white py-2 rounded">Create Account</button>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Save the HTML as forgot.html.
  2. Use Tailwind via CDN in the head.
<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded shadow-md w-full max-w-sm">
    <h2 class="text-xl font-bold text-center mb-4">Forgot Password</h2>
    <p class="text-sm text-gray-600 mb-3">Enter your email to reset your password.</p>
    <input type="email" placeholder="Email" class="w-full p-2 border rounded mb-4">
    <button class="w-full bg-yellow-500 text-white py-2 rounded">Send Reset Link</button>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Use this for 2FA OTP prompt after login.
  2. Include Tailwind CDN in the HTML head.
<div class="min-h-screen flex items-center justify-center bg-gray-50">
  <div class="bg-white p-6 rounded shadow w-full max-w-sm text-center">
    <h3 class="text-xl font-semibold mb-2">Enter 2FA Code</h3>
    <p class="text-sm text-gray-500 mb-4">We sent a code to your device.</p>
    <input type="text" maxlength="6" placeholder="123456" class="w-full text-center text-2xl p-2 border rounded mb-4">
    <button class="bg-blue-700 text-white w-full py-2 rounded">Verify</button>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Save as dashboard.html with Tailwind included.
  2. Update links or content based on your project.
<div class="min-h-screen bg-gray-100 p-6">
  <nav class="bg-white p-4 rounded shadow mb-6">
    <h1 class="text-xl font-bold">Welcome, User!</h1>
  </nav>
  <div class="grid grid-cols-2 gap-4">
    <div class="bg-white p-4 rounded shadow">
      <h2 class="font-semibold mb-2">Stats</h2>
      <p>You have 5 new messages.</p>
    </div>
    <div class="bg-white p-4 rounded shadow">
      <h2 class="font-semibold mb-2">Tasks</h2>
      <p>3 tasks pending.</p>
    </div>
  </div>
</div>

Admin Dashboard UI

<div class="max-w-4xl mx-auto p-6 bg-white rounded shadow">
  <h2 class="text-2xl font-bold mb-4">User Management</h2>
  <table class="w-full text-left border-collapse">
    <thead>
      <tr class="bg-gray-100">
        <th class="p-3 border">Name</th>
        <th class="p-3 border">Email</th>
        <th class="p-3 border">Role</th>
        <th class="p-3 border">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="p-3 border">John Doe</td>
        <td class="p-3 border">john@example.com</td>
        <td class="p-3 border">Admin</td>
        <td class="p-3 border text-green-600">Active</td>
      </tr>
      <tr>
        <td class="p-3 border">Jane Smith</td>
        <td class="p-3 border">jane@example.com</td>
        <td class="p-3 border">User</td>
        <td class="p-3 border text-red-600">Inactive</td>
      </tr>
    </tbody>
  </table>
</div>
      

<div class="max-w-md mx-auto p-6 bg-white rounded shadow space-y-4">
  <h2 class="text-2xl font-bold mb-4">Notifications</h2>

  <div class="p-4 rounded bg-green-100 text-green-800 border border-green-300">
    Success: Your operation was successful.
  </div>

  <div class="p-4 rounded bg-yellow-100 text-yellow-800 border border-yellow-300">
    Warning: Please check your input.
  </div>

  <div class="p-4 rounded bg-red-100 text-red-800 border border-red-300">
    Error: Something went wrong.
  </div>

  <div class="p-4 rounded bg-blue-100 text-blue-800 border border-blue-300">
    Info: New update available.
  </div>
</div>
      

<div class="flex min-h-screen bg-gray-100">
  <aside class="w-64 bg-white shadow-md p-5">
    <h2 class="text-xl font-bold mb-6">Dashboard</h2>
    <nav>
      <ul>
        <li class="mb-3"><a href="#" class="block p-2 hover:bg-indigo-100 rounded">Home</a></li>
        <li class="mb-3"><a href="#" class="block p-2 hover:bg-indigo-100 rounded">Analytics</a></li>
        <li class="mb-3"><a href="#" class="block p-2 hover:bg-indigo-100 rounded">Settings</a></li>
      </ul>
    </nav>
  </aside>

  <main class="flex-1 p-6">
    <h1 class="text-2xl font-semibold mb-4">Welcome to your Dashboard</h1>
    <div class="grid grid-cols-3 gap-6">
      <div class="bg-white p-4 rounded shadow"><h3 class="font-semibold">Widget 1</h3><p>Details...</p></div>
      <div class="bg-white p-4 rounded shadow"><h3 class="font-semibold">Widget 2</h3><p>Details...</p></div>
      <div class="bg-white p-4 rounded shadow"><h3 class="font-semibold">Widget 3</h3><p>Details...</p></div>
    </div>
  </main>
</div>
      

<div class="p-6 bg-white rounded shadow max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold mb-6">Analytics Overview</h2>

  <div class="grid grid-cols-2 gap-6">
    <div class="bg-gray-100 h-48 flex items-center justify-center rounded">
      <span class="text-gray-500">Chart Placeholder 1</span>
    </div>

    <div class="bg-gray-100 h-48 flex items-center justify-center rounded">
      <span class="text-gray-500">Chart Placeholder 2</span>
    </div>
  </div>
</div>
      

<div class="max-w-md mx-auto p-6 bg-white rounded shadow">
  <h2 class="text-2xl font-semibold mb-6">Settings</h2>

  <form>
    <div class="mb-4 flex items-center justify-between">
      <label for="notifications" class="font-medium">Enable Notifications</label>
      <input type="checkbox" id="notifications" class="form-checkbox h-5 w-5 text-indigo-600">
    </div>

    <div class="mb-4">
      <label for="email" class="block mb-1 font-medium">Email Address</label>
      <input type="email" id="email" class="w-full border rounded p-2">
    </div>

    <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Save Changes</button>
  </form>
</div>

Responsive Components

<nav class="bg-indigo-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white font-bold text-xl">Brand</a>
    <button class="text-white md:hidden" id="menu-btn">☰</button>
    <ul id="menu" class="hidden md:flex space-x-6 text-white">
      <li><a href="#" class="hover:text-indigo-300">Home</a></li>
      <li><a href="#" class="hover:text-indigo-300">About</a></li>
      <li><a href="#" class="hover:text-indigo-300">Services</a></li>
      <li><a href="#" class="hover:text-indigo-300">Contact</a></li>
    </ul>
  </div>
</nav>

<script>
  const btn = document.getElementById('menu-btn');
  const menu = document.getElementById('menu');
  btn.addEventListener('click', () => {
    menu.classList.toggle('hidden');
  });
</script>
      

<footer class="bg-gray-800 text-white p-8">
  <div class="max-w-6xl mx-auto grid grid-cols-4 gap-8">
    <div>
      <h3 class="font-bold mb-4">Company</h3>
      <ul>
        <li><a href="#" class="hover:underline">About Us</a></li>
        <li><a href="#" class="hover:underline">Careers</a></li>
      </ul>
    </div>
    <div>
      <h3 class="font-bold mb-4">Services</h3>
      <ul>
        <li><a href="#" class="hover:underline">Consulting</a></li>
        <li><a href="#" class="hover:underline">Sales</a></li>
      </ul>
    </div>
    <div>
      <h3 class="font-bold mb-4">Support</h3>
      <ul>
        <li><a href="#" class="hover:underline">Help Center</a></li>
        <li><a href="#" class="hover:underline">Contact Us</a></li>
      </ul>
    </div>
    <div>
      <h3 class="font-bold mb-4">Legal</h3>
      <ul>
        <li><a href="#" class="hover:underline">Privacy Policy</a></li>
        <li><a href="#" class="hover:underline">Terms of Service</a></li>
      </ul>
    </div>
  </div>
</footer>
      

<section class="bg-indigo-600 text-white py-20">
  <div class="max-w-4xl mx-auto text-center px-4">
    <h1 class="text-4xl font-bold mb-4">Welcome to Our Service</h1>
    <p class="mb-8 text-lg">Build your dreams with us. We provide solutions for all your needs.</p>
    <button class="bg-white text-indigo-600 font-semibold px-6 py-3 rounded hover:bg-gray-100">Get Started</button>
  </div>
</section>
      

<section class="max-w-4xl mx-auto p-6">
  <div class="flex justify-center mb-6">
    <button id="toggleBtn" class="bg-indigo-600 text-white px-4 py-2 rounded">Switch to Yearly</button>
  </div>

  <div class="grid grid-cols-3 gap-6">
    <div class="bg-white p-6 rounded shadow text-center">
      <h3 class="text-xl font-bold mb-4">Basic</h3>
      <p class="text-3xl font-extrabold mb-4" id="price-basic">$10/mo</p>
      <ul class="mb-4 text-left">
        <li>Feature 1</li>
        <li>Feature 2</li>
      </ul>
      <button class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Select</button>
    </div>

    <div class="bg-white p-6 rounded shadow text-center">
      <h3 class="text-xl font-bold mb-4">Pro</h3>
      <p class="text-3xl font-extrabold mb-4" id="price-pro">$20/mo</p>
      <ul class="mb-4 text-left">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
      <button class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Select</button>
    </div>

    <div class="bg-white p-6 rounded shadow text-center">
      <h3 class="text-xl font-bold mb-4">Enterprise</h3>
      <p class="text-3xl font-extrabold mb-4" id="price-enterprise">$50/mo</p>
      <ul class="mb-4 text-left">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
        <li>Feature 4</li>
      </ul>
      <button class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700">Select</button>
    </div>
  </div>
</section>

<script>
  const toggleBtn = document.getElementById('toggleBtn');
  let yearly = false;

  toggleBtn.addEventListener('click', () => {
    yearly = !yearly;
    document.getElementById('price-basic').textContent = yearly ? '$100/yr' : '$10/mo';
    document.getElementById('price-pro').textContent = yearly ? '$200/yr' : '$20/mo';
    document.getElementById('price-enterprise').textContent = yearly ? '$500/yr' : '$50/mo';
    toggleBtn.textContent = yearly ? 'Switch to Monthly' : 'Switch to Yearly';
  });
</script>
      

<section class="max-w-6xl mx-auto p-8">
  <h2 class="text-3xl font-bold text-center mb-8">Meet Our Team</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

    <div class="bg-white p-6 rounded shadow text-center">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Jane Doe" class="w-24 h-24 rounded-full mx-auto mb-4">
      <h3 class="font-bold text-xl">Jane Doe</h3>
      <p class="text-gray-600">CEO</p>
    </div>

    <div class="bg-white p-6 rounded shadow text-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Smith" class="w-24 h-24 rounded-full mx-auto mb-4">
      <h3 class="font-bold text-xl">John Smith</h3>
      <p class="text-gray-600">Lead Developer</p>
    </div>

    <div class="bg-white p-6 rounded shadow text-center">
      <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Emily Davis" class="w-24 h-24 rounded-full mx-auto mb-4">
      <h3 class="font-bold text-xl">Emily Davis</h3>
      <p class="text-gray-600">Marketing Manager</p>
    </div>

  </div>
</section>

Forms & Utilities

Steps to Run (Pure Tailwind)

  1. Create an HTML file (e.g., contact.html).
  2. Include Tailwind CSS via CDN in the <head>.
  3. Paste the code below inside the <body> tag.
  4. Open the file in a browser.
<div class="min-h-screen flex items-center justify-center bg-gray-50 p-6">
  <form class="bg-white p-6 rounded shadow-md w-full max-w-md space-y-4">
    <h2 class="text-2xl font-bold mb-4 text-center">Contact Us</h2>
    <input type="text" placeholder="Your Name" class="w-full p-2 border border-gray-300 rounded">
    <input type="email" placeholder="Your Email" class="w-full p-2 border border-gray-300 rounded">
    <textarea placeholder="Message" rows="4" class="w-full p-2 border border-gray-300 rounded"></textarea>
    <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded">Send Message</button>
  </form>
</div>

Steps to Run (Pure Tailwind)

  1. Create an HTML file (e.g., newsletter.html).
  2. Include Tailwind CSS via CDN in the head.
  3. Paste the code inside the body.
  4. Open in browser and test.
<div class="min-h-screen flex items-center justify-center bg-gray-100 p-6">
  <form class="bg-white p-6 rounded shadow-md w-full max-w-sm">
    <h2 class="text-xl font-semibold mb-3 text-center">Subscribe to our Newsletter</h2>
    <div class="flex gap-2">
      <input type="email" placeholder="Your email address" class="flex-grow p-2 border border-gray-300 rounded">
      <button type="submit" class="bg-green-600 text-white px-4 rounded">Subscribe</button>
    </div>
  </form>
</div>

Steps to Run (Pure Tailwind)

  1. Create invoice.html.
  2. Include Tailwind CSS CDN.
  3. Paste inside body tag.
  4. Open file in browser.
<div class="max-w-xl mx-auto bg-white p-6 rounded shadow mt-10">
  <h1 class="text-2xl font-bold mb-6">Invoice</h1>
  <div class="mb-4">
    <p><strong>Invoice #:</strong> 12345</p>
    <p><strong>Date:</strong> 2025-06-01</p>
  </div>
  <table class="w-full text-left border-collapse border border-gray-300">
    <thead>
      <tr>
        <th class="border border-gray-300 p-2">Item</th>
        <th class="border border-gray-300 p-2">Quantity</th>
        <th class="border border-gray-300 p-2">Price</th>
        <th class="border border-gray-300 p-2">Total</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="border border-gray-300 p-2">Web Design</td>
        <td class="border border-gray-300 p-2">2</td>
        <td class="border border-gray-300 p-2">$300</td>
        <td class="border border-gray-300 p-2">$600</td>
      </tr>
      <tr>
        <td class="border border-gray-300 p-2">Hosting</td>
        <td class="border border-gray-300 p-2">1</td>
        <td class="border border-gray-300 p-2">$100</td>
        <td class="border border-gray-300 p-2">$100</td>
      </tr>
    </tbody>
  </table>
  <div class="text-right mt-4">
    <strong>Total: $700</strong>
  </div>
</div>

Steps to Run (Pure Tailwind)

  1. Create blogpost.html.
  2. Include Tailwind CDN.
  3. Paste inside body.
  4. Open in browser.
<article class="max-w-3xl mx-auto bg-white p-6 rounded shadow mt-8">
  <h1 class="text-3xl font-bold mb-4">Sample Blog Post Title</h1>
  <img src="https://via.placeholder.com/700x300" alt="Blog Image" class="w-full rounded mb-4">
  <p class="mb-4 text-gray-700">This is a sample paragraph of the blog post content. It includes information about the topic.</p>
  <div class="mb-4">
    <span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded mr-2 text-xs font-semibold">Tag1</span>
    <span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded mr-2 text-xs font-semibold">Tag2</span>
    <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-semibold">Tag3</span>
  </div>
</article>

Steps to Run (Pure Tailwind, no JS)

This is a basic FAQ accordion using only HTML and Tailwind CSS, leveraging the <details> and <summary> elements.

  1. Create faq.html.
  2. Include Tailwind CSS CDN.
  3. Paste inside body.
  4. Open in browser.
<div class="max-w-xl mx-auto mt-10 p-4 bg-white rounded shadow">
  <h2 class="text-2xl font-bold mb-6 text-center">Frequently Asked Questions</h2>
  <details class="mb-4 border border-gray-300 rounded">
    <summary class="cursor-pointer bg-gray-100 p-3 font-semibold">What is your return policy?</summary>
    <p class="p-3 border-t border-gray-300">You can return any item within 30 days of purchase.</p>
  </details>
  <details class="mb-4 border border-gray-300 rounded">
    <summary class="cursor-pointer bg-gray-100 p-3 font-semibold">How do I track my order?</summary>
    <p class="p-3 border-t border-gray-300">Tracking information will be sent to your email after shipment.</p>
  </details>
  <details class="mb-4 border border-gray-300 rounded">
    <summary class="cursor-pointer bg-gray-100 p-3 font-semibold">Do you offer customer support?</summary>
    <p class="p-3 border-t border-gray-300">Yes, 24/7 support is available via chat and email.</p>
  </details>
</div>