Search Components

All Components

Browse all available Tailwind CSS components

Functional Components Component

A web component mimicking real-world counterparts in a business-corporate style with a complementary color scheme, simple layout, and responsive design with dark mode support.

Open Preview

                <div class="p-6 max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Business Analyst</p>
    </div>
  </div>
  <div class="mt-4">
    <p class="text-gray-700 dark:text-gray-300">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
    </p>
  </div>
  <div class="mt-4">
    <img class="w-full h-32 rounded-lg" src="https://picsum.photos/400/200" alt="Business Image">
  </div>
  <div class="mt-4">
    <a href="#" class="inline-block px-6 py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Contact</a>
  </div>
</div>

Simple Dark Mode Mega Menu

A simple, responsive mega menu component for business websites using dark mode with a complementary color scheme. Built with Tailwind CSS, featuring dark theme support and no JavaScript.

Open Preview

                <header class="bg-gray-900 text-gray-300">
  <nav class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <a href="#" class="text-xl font-bold text-white">Your Logo</a>
      <div class="hidden md:flex space-x-8">
        <div class="relative group">
          <button class="hover:text-white">Menu 1</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category 1</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link 1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link 3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category 2</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link A</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link B</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link C</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="relative group">
          <button class="hover:text-white">Menu 2</button>
          <div class="absolute z-10 hidden group-hover:block bg-gray-800 p-6 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-bold text-white mb-2">Category X</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link X1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link X3</a></li>
                </ul>
              </div>
              <div>
                <h3 class="font-bold text-white mb-2">Category Y</h3>
                <ul>
                  <li><a href="#" class="block hover:text-white py-1">Link Y1</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y2</a></li>
                  <li><a href="#" class="block hover:text-white py-1">Link Y3</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <a href="#" class="hover:text-white">About</a>
        <a href="#" class="hover:text-white">Contact</a>
      </div>
      <div class="md:hidden">
        <button class="text-gray-300 hover:text-white focus:outline-none">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
</header>

Media Embed Component

A Media Embed Component designed for e-commerce with a 3D design style, complementary color scheme, and responsive layout that supports dark mode.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-2xl transform hover:scale-105 transition-transform duration-300 ease-in-out">
    <div class="relative">
        <img src="https://picsum.photos/400/200" alt="Product Image" class="w-full h-48 object-cover rounded-t-lg">
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 rounded-b-lg">
            <h2 class="text-white text-lg font-semibold">Product Title</h2>
            <p class="text-gray-300">Short description of the product goes here.</p>
        </div>
    </div>
    <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200">Add to Cart</p>
        <div class="flex justify-between items-center mt-2">
            <span class="text-gray-800 dark:text-gray-200 font-bold text-xl">$49.99</span>
            <button class="bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 text-white font-bold py-2 px-4 rounded">Buy Now</button>
        </div>
    </div>
</div>

Minimalist Social Login Component

Minimalist Social Login Component in Grayscale for E-commerce, Simple, Responsive, Dark Theme Support, no JavaScript

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm p-6 bg-white rounded-md shadow-md dark:bg-gray-800">
    <h1 class="text-2xl font-semibold text-center text-gray-700 dark:text-white">Login</h1>
    <div class="flex justify-center mt-4 space-x-4">
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Facebook</button>
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Google</button>
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Twitter</button>
    </div>
  </div>
</div>

Breadcrumb Navigation Component

A Material Design-inspired Breadcrumb Navigation Component for dashboards, using a grayscale color scheme and complex interactions, implemented with Tailwind CSS for responsiveness and dark theme support.

Open Preview

                <nav class="flex flex-col md:flex-row items-center justify-between bg-white dark:bg-gray-800 shadow-md p-4 rounded-lg" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-4 h-4 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1H5v-7.586l.293-.293L10 2.414l5.707 5.707.293.293V15a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-7.586l.293.293 2 2a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Dashboard
      </a>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-300">Settings</span>
      </div>
    </li>
    </ul>
     <div class="flex items-center space-x-3 rtl:space-x-reverse mt-4 md:mt-0">
        <button type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center" >
             <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
            </svg>
            <span class="sr-only">Info</span>
        </button>
        <button type="button" class="text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">
            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
                <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9v1a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Zm4 0v1a1 1 0 0 1-2 0V9a1 1 0 0 1 2 0Z"/>
            </svg>
            Action
        </button>
     </div>
</nav>

Wishlist Component

A simplistic wishlist component styled with a Brutalist approach, using a grayscale color scheme, designed for showcasing work or products.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Wishlist</h2>
    <ul class="space-y-4">
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 1.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 2.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
        <li class="border-b border-gray-300 dark:border-gray-700 pb-4">
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/100/100" alt="Wishlist Item" class="w-16 h-16 rounded-lg">
                <div class="flex-1">
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Product 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description for product 3.</p>
                </div>
                <button class="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-300">Add</button>
            </div>
        </li>
    </ul>
</div>

Shopping Cart Component

A Shopping Cart Component designed with Glassmorphism effects, utilizing a complementary color scheme and optimized for dark mode. Perfect for portfolio usage, showcasing work or products.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md bg-opacity-30 border border-gray-200 dark:border-gray-600 p-6 w-full max-w-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white text-center">Shopping Cart</h2>
        <div class="mt-4">
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Product Name</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$29.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 1</span>
            </div>
            <div class="flex items-center justify-between border-b pb-2 mb-2">
                <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-md" />
                <div class="flex-1 mx-2">
                    <h3 class="text-md font-medium text-gray-700 dark:text-gray-300">Another Product</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">$19.99</p>
                </div>
                <span class="text-gray-600 dark:text-gray-200">Quantity: 2</span>
            </div>
        </div>
        <div class="flex items-center justify-between border-t pt-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Total:</h3>
            <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$69.97</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Checkout</button>
    </div>
</div>

Tabs Component

A minimalist and vibrant Tabs Component for e-commerce with moderate complexity, responsive design, and dark theme support, implemented using Tailwind CSS and HTML.

Open Preview

                <div class="w-full max-w-md mx-auto">
  <div class="flex border-b border-gray-200 dark:border-gray-700">
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Description
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none border-b-2 border-blue-600 dark:border-blue-400">
      Reviews
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Shipping
    </button>
  </div>
  <div class="mt-8">
    <!-- Content goes here based on the active tab -->
    <div class="text-gray-700 dark:text-gray-300">
      <!-- Reviews Content (Example) -->
      <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
      <div class="space-y-6">
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
            <p class="mt-2">This product is amazing! I highly recommend it.</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 days ago</p>
            <p class="mt-2">Great quality and fast shipping.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Brutalist Search Box

A brutalist search box component for a dashboard, featuring a complementary color scheme and moderate complexity, with responsive design and dark theme support using Tailwind CSS.

Open Preview

                <div class="relative max-w-md mx-auto mt-10">
  <input type="text" placeholder="Search..." class="w-full px-6 py-4 text-lg text-gray-800 bg-yellow-300 border-4 border-black focus:outline-none focus:border-red-600 dark:bg-yellow-600 dark:text-gray-200 dark:border-white dark:focus:border-red-800">
  <svg class="absolute right-0 top-0 mt-4 mr-5 w-6 h-6 text-black dark:text-white" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>

Hamburger Menu Component

A responsive Hamburger Menu Component designed with a 3D style, suitable for dashboard purposes. It incorporates a triadic color scheme and has a complex interface with interactive elements, supporting both light and dark themes.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative w-16 h-16 mt-8 cursor-pointer group">
        <div class="absolute inset-0 bg-blue-500 rounded-lg transform transition-transform duration-200 ease-in-out group-hover:scale-105 dark:bg-blue-400"></div>
        <div class="bg-red-500 w-16 h-2 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-red-400"></div>
        <div class="bg-yellow-500 w-16 h-2 mt-1 rounded-lg transition-all duration-200 ease-in-out group-hover:w-24 dark:bg-yellow-400"></div>
    </div>
    <nav class="absolute top-16 left-0 w-64 bg-white dark:bg-gray-800 shadow-lg rounded-lg transition-all duration-300 transform -translate-y-10 opacity-0 group-hover:translate-y-0 group-hover:opacity-100">
        <ul class="py-2">
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Dashboard</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Reports</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Analytics</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/women/35.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Settings</span>
            </li>
            <li class="flex items-center p-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors rounded">
                <img src="https://randomuser.me/api/portraits/men/30.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                <span class="text-gray-800 dark:text-gray-200">Profile</span>
            </li>
        </ul>
    </nav>
</div>

1 ... 252 253 254 255 256 ... 335

Search Components

Categories

All Components