All Components

Browse all available Tailwind CSS components

Product Gallery Component

A responsive product gallery component using Tailwind CSS with a Neumorphic design style, complementary color scheme, and complex layout suitable for business websites. Includes dark mode support and uses images from picsum.photos.

Open Preview

                <div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
    <!-- Product Card 1 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$99.99</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-green-600 dark:text-green-400">$149.99</span>
        <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-red-600 dark:text-red-400">$199.99</span>
        <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-purple-600 dark:text-purple-400">$249.99</span>
        <button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 5 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-yellow-600 dark:text-yellow-400">$299.99</span>
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
     <!-- Product Card 6 -->
    <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-teal-600 dark:text-teal-400">$349.99</span>
        <button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom Neumorphic Shadows */
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
  }
  .shadow-inner-neumorphic-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
  }
</style>

Follow Button Component

A complex, responsive follow button component with glassmorphism style and vibrant colors, designed for business websites with dark mode support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
      <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
        Follow
      </button>
      <div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span>1.2k Followers</span>
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
          </svg>
          <span>250 Following</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.glass {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
    background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>

Two-Factor Authentication Component

A responsive Two-Factor Authentication component designed in dark mode using grayscale colors, suitable for blog or content consumption.

Open Preview

                <div class="min-h-screen bg-gray-900 flex items-center justify-center p-6">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-white text-center mb-4">Two-Factor Authentication</h2>
        <p class="text-gray-400 text-center mb-6">To enhance your account's security, please enter the verification code sent to your mobile device.</p>
        <form class="space-y-6">
            <div>
                <label class="block text-gray-300 mb-1" for="email">Email Address</label>
                <input type="email" id="email" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="[email protected]" required>
            </div>
            <div>
                <label class="block text-gray-300 mb-1" for="code">Verification Code</label>
                <input type="text" id="code" class="bg-gray-700 border border-gray-600 text-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 w-full p-2" placeholder="Enter your code" required>
            </div>
            <button type="submit" class="w-full bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 rounded focus:outline-none">Verify</button>
        </form>
        <div class="text-center mt-4">
            <a href="#" class="text-gray-400 hover:underline">Resend Code</a>
        </div>
    </div>
</div>

Toast Notifications

Minimalist/Flat Design Toast Notifications Component with Analogous color scheme, Simple complexity, for Portfolio purpose. Responsive with dark theme support.

Open Preview

                <div class="fixed bottom-4 right-4 space-y-2">
  <!-- Success Toast -->
  <div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Success!</p>
      <p>Your action was completed successfully.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Error!</p>
      <p>Something went wrong. Please try again.</p>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Information</p>
      <p>This is an informational message.</p>
    </div>
  </div>
</div>

Glassmorphism Follow Button

Glassmorphism Follow Button Component for Social Media with Dark Theme

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
        <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
      </div>
      <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Follow
      </button>
    </div>
  </div>
</div>

Columns Component

A responsive columns component with small engaging animations, suitable for e-commerce with a dark theme.

Open Preview

                <div class="container mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Product 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 1</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$29.99</p>
            </div>
        </div>

        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/301?random=1" alt="Product 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 2</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$39.99</p>
            </div>
        </div>

        <div class="transition-transform transform hover:scale-105 bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
            <img src="https://picsum.photos/400/302?random=1" alt="Product 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
                    <span class="font-semibold text-gray-800 dark:text-white">Product 3</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
    </div>
</div>

Badges Component

A minimalist badges component for dashboards, featuring earth tones and dark mode support.

Open Preview

                <div class="flex flex-wrap p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Design Team</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">3</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1018/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-brown-600" />
        <span class="ml-2 text-brown-600 dark:text-brown-400 font-semibold">Project A</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-brown-600 rounded-full">5</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-green-600" />
        <span class="ml-2 text-green-600 dark:text-green-400 font-semibold">Marketing</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-green-600 rounded-full">8</span>
    </div>
    <div class="flex items-center m-2">
        <img src="https://picsum.photos/id/1031/100/100" alt="Project Image" class="w-10 h-10 rounded-full border-2 border-red-600" />
        <span class="ml-2 text-red-600 dark:text-red-400 font-semibold">Project B</span>
        <span class="ml-2 px-2 py-1 text-sm text-white bg-red-600 rounded-full">2</span>
    </div>
</div>

Breadcrumb Navigation Component

A responsive Breadcrumb Navigation Component designed with Glassmorphism style and Earth tone colors, perfect for professional company websites. It supports dark theme and includes interactive features for navigation.

Open Preview

                <nav class="bg-opacity-50 backdrop-blur-lg bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg">
    <ol class="list-reset flex items-center space-x-4 text-gray-600 dark:text-gray-300">
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Home</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Services</a>
        </li>
        <li>
            <span class="text-gray-400 dark:text-gray-500">/</span>
        </li>
        <li>
            <a href="#" class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200">Consulting</a>
        </li>
    </ol>
</nav>

<!-- Example of how to display user avatars or images in a Breadcrumb if needed -->
<div class="flex items-center space-x-3 mt-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
    <span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>

Buttons Component

Neumorphism Buttons Component with Monochromatic color scheme for Portfolio purpose, responsive with dark theme support.

Open Preview

                <section class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Primary Button</button>
    <button class="px-6 py-3 text-gray-700 duration-300 ease-in-out bg-gray-300 rounded-full shadow-neumorphic dark:bg-gray-700 dark:text-gray-200 dark:shadow-neumorphic-dark hover:shadow-neumorphic-hover dark:hover:shadow-neumorphic-dark-hover">Secondary Button</button>
  </div>

  <style>
    .shadow-neumorphic {
      box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
    }
    .hover\:shadow-neumorphic-hover:hover {
      box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
    }
     .dark .hover\:shadow-neumorphic-dark-hover:hover {
      box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
    }
  </style>

</section>

User Profiles Component

A simple, responsive user profile component for e-commerce with microinteractions, complementing color scheme, dark mode support, and no JavaScript.

Open Preview

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-5 font-medium text-gray-900 dark:text-white">John Doe</p>
      <p class="text-sm leading-5 text-gray-600 dark:text-gray-400">Customer since 2023</p>
      <button class="mt-4 px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150 dark:bg-blue-700 dark:hover:bg-blue-600">View Profile</button>
    </div>
  </div>
</div>

1 ... 129 130 131 132 133 ... 242

Categories

All Components