All Components

Browse all available Tailwind CSS components

Skeuomorphism Grayscale Gallery Component

Responsive photo gallery with Skeuomorphism design, grayscale color scheme, and complex layout for social media. Includes dark theme support.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200 mb-12">Photo Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Gallery Item 1 -->
      <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Image Title</h2>
          <p class="text-gray-600 dark: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 justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">3 Likes</span>
          </div>
        </div>
      </div>

       <!-- Gallery Item 2 (Repeat structure for more items) -->
        <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Another Image Title</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">5 Likes</span>
          </div>
        </div>
      </div>

       <!-- Gallery Item 3 (Repeat structure for more items) -->
       <div class="bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image" class="w-full h-64 object-cover">
        <div class="p-6">
          <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 dark:border-gray-600 mr-4">
            <p class="text-gray-700 dark:text-gray-300 font-semibold">Peter Jones</p>
          </div>
          <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">My Travel Photo</h2>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
          <div class="flex justify-between items-center">
            <div class="flex space-x-4">
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.165-.915L3 20l1.47-3.674A9.986 9.986 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                </svg>
              </button>
            </div>
            <span class="text-gray-600 dark:text-gray-400 text-sm">8 Likes</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

OAuth Buttons Component

A responsive OAuth buttons component designed with engaging animations and earth tone colors, suitable for social media interfaces, and supporting dark themes.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
        Google
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
        Facebook
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
        Twitter
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
        GitHub
    </button>
</div>

Content Display Components Component

Glassmorphism Content Display Component with Earth Tones

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12">
  <div class="container mx-auto px-4">
    <div class="bg-white/30 dark:bg-gray-800/30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 md:p-10">
      <div class="grid md:grid-cols-3 gap-8">
        <div class="md:col-span-2">
          <img src="https://picsum.photos/seed/content1/800/400" alt="Featured content image" class="rounded-lg shadow-md mb-6">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-white mb-4">The Beauty of Nature's Colors</h2>
          <div class="flex items-center text-gray-600 dark:text-gray-300 text-sm mb-6">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author avatar" class="w-8 h-8 rounded-full mr-3">
            <span>By John Doe</span>
            <span class="mx-3">&middot;</span>
            <span>October 26, 2023</span>
            <span class="mx-3">&middot;</span>
            <span>10 min read</span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed mb-6">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
          <div class="flex flex-wrap gap-3">
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Nature</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Earth Tones</span>
            <span class="bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-xs px-3 py-1 rounded-full">Design</span>
          </div>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Related Articles</h3>
          <ul class="space-y-4">
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related1/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">The Power of Natural Landscapes</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 20, 2023</p>
              </div>
            </li>
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related2/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">Bringing the Outdoors In</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 15, 2023</p>
              </div>
            </li>
            <li class="flex items-center">
              <img src="https://picsum.photos/seed/related3/100/80" alt="Related article image" class="rounded-md mr-4">
              <div>
                <p class="text-gray-700 dark:text-gray-200 font-semibold">Sustainable Living with Earth Tones</p>
                <p class="text-gray-600 dark:text-gray-300 text-sm">October 10, 2023</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

A complex, skeuomorphic sticky navigation bar with vibrant colors, designed for social media interfaces. Includes responsive design and dark mode support using Tailwind CSS. Features profile image, search bar, notifications, and messaging icons.

Open Preview

                <nav class="sticky top-0 bg-gradient-to-b from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50">
  <div class="container mx-auto flex items-center justify-between">
    <!-- Profile Pic and Site Title -->
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full border-2 border-white mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
      <span class="text-white text-2xl font-bold drop-shadow-md">SocialNet</span>
    </div>

    <!-- Search Bar -->
    <div class="flex-grow mx-5">
      <input type="text" placeholder="Search..." class="w-full px-4 py-2 rounded-full bg-white bg-opacity-30 text-white placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 dark:placeholder-gray-300">
    </div>

    <!-- Icons -->
    <div class="flex items-center space-x-6">
      <a href="#" class="text-white hover:scale-110 transition-transform duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
        </svg>
      </a>
      <a href="#" class="text-white hover:scale-110 transition-transform duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55c-.18.18-.42.29-.67.29H9v-.54l-.55-.55z"/>
        </svg>
      </a>
    </div>
  </div>
</nav>

Footer Component

A simple dark mode footer component for social media with complementary color scheme.

Open Preview

                <footer class="bg-gray-800 text-white py-4">
    <div class="container mx-auto flex flex-col items-center">
        <div class="flex space-x-4 mb-3">
            <a href="#" class="text-gray-400 hover:text-gray-200">About</a>
            <a href="#" class="text-gray-400 hover:text-gray-200">Contact</a>
            <a href="#" class="text-gray-400 hover:text-gray-200">Privacy Policy</a>
        </div>
        <div class="flex space-x-4 mb-3">
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Facebook" class="inline-block">
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Twitter" class="inline-block">
            </a>
            <a href="#" class="text-gray-400 hover:text-gray-200">
                <img src="https://picsum.photos/30/30" alt="Instagram" class="inline-block">
            </a>
        </div>
        <div class="text-center">
            <p class="text-gray-400">© 2023 Your Company. All rights reserved.</p>
        </div>
    </div>
</footer>

Brutalist E-commerce Navigation Component

A complex and brutalist e-commerce navigation component using Tailwind CSS, featuring a triadic color scheme (Yellow, Cyan, Fuchsia) with high contrast (Black/White), a CSS-only mega-menu, CSS-only search reveal, a CSS-only responsive mobile menu, and dark mode support. HTML only, no JavaScript.

Open Preview

                <nav class="bg-yellow-400 text-black border-b-8 border-black dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
  <div class="container mx-auto px-4 relative">

    <!-- Checkbox for Mobile Menu State - Controls the mobile menu visibility -->
    <input type="checkbox" id="mobile-menu-toggle" class="hidden peer">

    <!-- Main Row: Logo, Desktop Nav, Mobile Toggle Label -->
    <!-- This div is a sibling of the checkbox -->
    <div class="flex justify-between items-center py-6">

      <!-- Logo -->
      <div class="text-3xl font-black uppercase tracking-widest border-4 border-black p-2 dark:border-yellow-400">
        <a href="#" class="hover:text-fuchsia-500 transition duration-300">BRUTAL SHOP</a>
      </div>

      <!-- Desktop Navigation & Icons (Hidden on Mobile) -->
      <div class="hidden md:flex items-center space-x-8">
        <ul class="flex items-center space-x-8 uppercase font-bold">
          <!-- Categories with CSS-only Mega-Menu -->
          <li class="relative group">
            <a href="#" class="hover:text-fuchsia-500 focus:outline-none focus:text-fuchsia-500">Categories</a>
            <!-- Mega-Menu Content (CSS-only via group-hover) -->
            <div class="absolute left-0 top-full mt-2 w-64 bg-cyan-500 text-black p-6 border-4 border-black opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10 dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
              <h4 class="font-black mb-3 border-b-4 border-black dark:border-cyan-500">Shop By Category</h4>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:underline">Electronics</a></li>
                <li><a href="#" class="hover:underline">Apparel</a></li>
                <li><a href="#" class="hover:underline">Home Goods</a></li>
                <li><a href="#" class="hover:underline">Books</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#" class="hover:text-fuchsia-500">New Arrivals</a></li>
          <li><a href="#" class="hover:text-fuchsia-500">Deals</a></li>
        </ul>

        <!-- User Icons, Search, Cart -->
        <div class="flex items-center space-x-6 text-2xl">
           <!-- Search Toggle/Input (CSS-only reveal on hover/focus) -->
           <div class="relative group">
               <svg class="w-6 h-6 cursor-pointer hover:text-fuchsia-500" 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>
               <!-- Simple search input reveal on hover/focus -->
               <input type="text" placeholder="Search..." class="absolute right-0 top-full mt-2 px-3 py-2 w-48 border-4 border-black bg-white text-black opacity-0 invisible group-hover:opacity-100 group-hover:visible focus:opacity-100 focus:visible transition-all duration-300 z-10 dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
           </div>

           <!-- User Icon -->
           <a href="#" class="hover:text-fuchsia-500">
               <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
           </a>
           <!-- Wishlist Icon -->
           <a href="#" class="hover:text-fuchsia-500">
              <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
           </a>
          <!-- Cart Icon with Count -->
          <a href="#" class="relative hover:text-fuchsia-500">
            <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            <span class="absolute -top-2 -right-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-yellow-400">3</span>
          </a>
        </div>
      </div>

      <!-- Mobile Menu Toggle Label (Visible on Mobile) -->
      <!-- This label controls the hidden checkbox peer -->
      <label for="mobile-menu-toggle" class="md:hidden block cursor-pointer p-2 relative z-20">
           <!-- Hamburger Icon - Spans styled based on the peer-checked state of the checkbox -->
           <div class="space-y-2 peer-checked:space-y-0 peer-checked:rotate-45 transition-transform duration-300">
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:rotate-90 peer-checked:translate-y-1.5 transition-transform duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:opacity-0 transition-opacity duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:-rotate-90 peer-checked:-translate-y-1.5 transition-transform duration-300"></span>
           </div>
      </label>
    </div>

    <!-- Mobile Menu Content -->
    <!-- This div is a sibling of the checkbox and the main row div -->
    <!-- Its visibility is controlled by the peer-checked state of the checkbox -->
    <div id="mobile-menu" class="md:hidden absolute top-[theme(spacing.20)] left-0 w-full bg-cyan-500 text-black border-t-8 border-black opacity-0 invisible transition-all duration-300 z-10 peer-checked:opacity-100 peer-checked:visible dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
      <div class="px-4 py-6 space-y-6">
         <!-- Search Input - Mobile -->
         <div>
            <input type="text" placeholder="Search..." class="px-3 py-2 w-full border-4 border-black bg-white text-black dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
         </div>
         <!-- Mobile Links -->
         <ul class="space-y-4 uppercase font-bold text-xl">
             <li><a href="#" class="block hover:text-fuchsia-500">Categories</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">New Arrivals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Deals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Account</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Wishlist</a></li>
             <li><a href="#" class="flex items-center hover:text-fuchsia-500">
                 Cart <span class="ml-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-cyan-500">3</span>
             </a></li>
         </ul>
      </div>
    </div>

  </div>
</nav>

Functional Components Component - Dark Mode UI

A responsive social media component designed with dark mode and earth tones, suitable for social networking interfaces. Features user avatars, post content, and interaction buttons.

Open Preview

                <div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

Neumorphism Pagination Component

Neumorphism Pagination Component for E-commerce using Tailwind CSS

Open Preview

                <nav class="flex items-center justify-between flex-column flex-wrap md:flex-row pt-4" aria-label="Table navigation">
    <span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span class="font-semibold text-gray-900 dark:text-white">1-10</span> of <span class="font-semibold text-gray-900 dark:text-white">1000</span></span>
    <ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                Previous
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
        </li>
        <li>
            <a href="#" aria-current="page" class="flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">3</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:hover:bg-gray-700 dark:hover:text-white">4</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">5</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                Next
            </a>
        </li>
    </ul>
</nav>

E-commerce Navigation Bar

Neumorphism E-commerce Navigation Bar with Earth Tones

Open Preview

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-700 dark:text-gray-300 font-bold text-xl">E-Shop</div>
    <div class="flex space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full py-2 px-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark focus:outline-none">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Cart
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Account
      </a>
    </div>
  </div>
</nav>

<style>
  /* Add these to your Tailwind configuration */
  /*
  module.exports = {
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5)',
          'neumorphic-dark': '9px 9px 16px rgba(0,0,0,.6), -9px -9px 16px rgba(50, 50, 50, .5)',
          'neumorphic-inset-light': 'inset 3px 3px 7px rgba(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255,.5)',
          'neumorphic-inset-dark': 'inset 3px 3px 7px rgba(0,0,0,.6), inset -3px -3px 7px rgba(50, 50, 50,.5)',
        }
      }
    }
  }
  */
</style>

Glassmorphism Progress Indicators Component

Glassmorphism Progress Indicators Component with Vibrant color scheme and Simple complexity.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen dark:bg-gray-900">
  <div class="dark:bg-gray-800 bg-white bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg rounded-lg p-6 shadow-xl dark:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
    <div class="w-64 h-4 bg-gray-300 rounded-full overflow-hidden dark:bg-gray-700">
      <div class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 dark:from-cyan-600 dark:to-blue-700 w-3/4 rounded-full"></div>
    </div>
    <p class="text-sm text-gray-700 dark:text-gray-300 mt-2">75% Complete</p>
  </div>
</div>

1 ... 125 126 127 128 129 ... 242