All Components

Browse all available Tailwind CSS components

Checkout Form Component

A responsive checkout form with glassmorphism design, featuring frosted glass-like translucent elements and support for dark mode.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
            </div>
            <img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
            <div class="flex justify-between items-center">
                <button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
                <div>
                    <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                </div>
            </div>
        </form>
    </div>
</div>

Product Cards Component with Dark Mode UI

Product Cards Component with Dark Mode UI and responsive effects using Tailwind CSS.

Open Preview

                <div class="bg-gray-900 text-white py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 1</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$19.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 2</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$29.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
      <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
        <div class="p-6">
          <h3 class="text-xl font-bold mb-2">Product Name 3</h3>
          <p class="text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center justify-between">
            <span class="text-lg font-bold">$39.99</span>
            <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Search Box

A search box component with a skeuomorphic design that mimics real-world elements, featuring responsiveness and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-md">
    <input type="text" class="p-4 pl-10 pr-4 text-gray-900 bg-white border border-gray-300 rounded-lg shadow-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 placeholder-gray-400" placeholder="Search..." />
    <svg class="absolute left-3 top-3 w-5 h-5 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm4 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16z" />
    </svg>
  </div>
</div>

Progress Indicators Component

This is a Material Design-styled progress indicator component using Tailwind CSS, with responsive effects and dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">

  <!-- Linear Progress Bar -->
  <div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
    <div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Circular Progress Indicator -->
  <div class="relative">
    <div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
    <div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
      75%
    </div>
  </div>

  <!-- Spacer -->
  <div class="my-8"></div>

  <!-- Linear Progress Bar with Label -->
  <div class="w-64">
    <div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
      <span class="text-base font-medium">Progress</span>
      <span class="text-sm font-medium">45%</span>
    </div>
    <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
      <div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
    </div>
  </div>

</div>

Glassmorphism Container Component

Glassmorphism Container Component with responsive effects and dark theme support.

Open Preview

                <div class="flex items-center justify-center min-h-screen from-teal-100 via-teal-300 to-teal-500 bg-gradient-to-br dark:from-gray-700 dark:via-gray-900 dark:to-black">
  <div class="bg-white bg-opacity-10 px-10 py-5 border-r-8 border-t-8 border-opacity-30 border-white
    backdrop-filter backdrop-blur-sm shadow-2xl rounded-md w-full max-w-md hover:scale-105 transition duration-500 ease-in-out dark:bg-gray-900 dark:bg-opacity-10 dark:border-gray-700 dark:border-opacity-30">
    <h1 class="text-3xl font-bold text-gray-900 text-center dark:text-white mb-6">Welcome</h1>
    <p class="text-gray-700 text-center dark:text-gray-300 mb-8">This is a Glassmorphism container component example with responsive effects and dark theme support.</p>
    <div class="flex justify-center">
      <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-teal-300 to-teal-500 group-hover:from-teal-300 group-hover:to-teal-500 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-teal-200 dark:focus:ring-teal-800">
        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
          Get Started
        </span>
      </button>
    </div>
  </div>
</div>

Mega Menu Component

A responsive Mega Menu component styled with Skeuomorphism, featuring dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
      <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
    </div>
    <button class="text-gray-800 dark:text-white focus:outline-none">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
      </svg>
    </button>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
      <ul class="mt-2">
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
        <li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
      </ul>
    </div>
  </div>
  <div class="mt-6">
    <h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
    <div class="flex space-x-4 mt-2">
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 1</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 2</span>
      </div>
      <div class="flex flex-col items-center">
        <img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
        <span class="text-gray-800 dark:text-gray-200">User 3</span>
      </div>
    </div>
  </div>
</div>

Table of Contents Component

A responsive Table of Contents component styled with Material Design principles using Tailwind CSS, supporting dark mode and featuring placeholder images and avatars.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="space-y-2">
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
                <a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
                <a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
                <a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
            </div>
        </li>
        <li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
            <div class="flex items-center">
                <img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
                <a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
            </div>
        </li>
    </ul>
</div>

Media Components Component

A media component designed in the brutalism style, showcasing a bold layout with high contrast, responsive effects, and dark theme support using Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
  <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
    <img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
    <div class="flex-1">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
      <p class="text-gray-700 dark:text-gray-400 mb-4">
        This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
      </p>
      <span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
        Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
      </span>
    </div>
  </div>
  <div class="mt-4 flex gap-4">
    <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
    <button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800, .bg-gray-700 {
      background-color: #4a5568;
    }
    .text-gray-200 {
      color: #edf2f7;
    }
    .text-gray-400 {
      color: #a0aec0;
    }
  }
</style>

Glassmorphism Follow Button

A responsive follow button with Glassmorphism design, dark mode support, using Tailwind CSS.

Open Preview

                <template>
  <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
      Follow
    </span>
  </button>
</template>

1 ... 208 209 210 211 212 ... 242

Categories

All Components

Checkout Form Component

Product Cards Component with Dark Mode UI

Skeuomorphic Search Box

Progress Indicators Component

Glassmorphism Container Component

Mega Menu Component

Table of Contents Component

Media Components Component

Tag Cloud Component

Glassmorphism Follow Button