Search Components

All Components

Browse all available Tailwind CSS components

Tag Cloud Component - Marketplace Sepia/Brown Material Design

A complex, responsive tag cloud component designed for marketplace platforms, using Material Design principles with sepia/brown tones. Features interactive tags, category filtering, and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 min-h-screen font-sans">

  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-amber-900 dark:text-amber-100 mb-6 sm:mb-8 text-center">
      Explore Marketplace Categories
    </h2>
    <p class="text-center text-lg text-amber-800 dark:text-stone-300 mb-8 sm:mb-12 max-w-2xl mx-auto">
      Discover products and services by browsing our extensive collection of tags and categories. Find exactly what you're looking for with ease.
    </p>

    <!-- Search and Filter Section -->
    <div class="bg-white dark:bg-stone-800 shadow-lg dark:shadow-xl rounded-xl p-4 sm:p-6 mb-8 sm:mb-12 transition-all duration-300 ease-in-out">
      <div class="flex flex-col md:flex-row items-center gap-4">
        <div class="relative flex-grow w-full md:w-auto">
          <input type="text" placeholder="Search for tags..." class="w-full pl-10 pr-4 py-2 rounded-lg border-2 border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-amber-900 dark:text-stone-200 placeholder-stone-400 dark:placeholder-stone-500 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 ease-in-out">
          <svg class="w-5 h-5 text-stone-400 dark:text-stone-500 absolute left-3 top-1/2 -translate-y-1/2" 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>
        <select class="w-full md:w-auto px-4 py-2 rounded-lg border-2 border-stone-200 dark:border-stone-700 bg-stone-50 dark:bg-stone-900 text-amber-900 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all duration-300 ease-in-out">
          <option>All Categories</option>
          <option>Popular</option>
          <option>New Arrivals</option>
          <option>Services</option>
          <option>Products</option>
        </select>
        <button class="w-full md:w-auto px-6 py-2 bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-semibold rounded-lg shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800 transition-all duration-300 ease-in-out">
          Apply Filter
        </button>
      </div>
    </div>

    <!-- Tag Cloud Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">

      <!-- Tag Cloud Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=1" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Electronics</h3>
            <p class="text-sm opacity-90">Gadgets & Devices</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Smartphones</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Computers</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Accessories</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=2" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Home Decor</h3>
            <p class="text-sm opacity-90">Furniture & Furnishings</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Furniture</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Lighting</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Art</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=3" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Fashion & Apparel</h3>
            <p class="text-sm opacity-90">Clothing & Accessories</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Womenswear</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Menswear</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Shoes</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=4" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Books & Media</h3>
            <p class="text-sm opacity-90">Books, Movies, Music</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Fiction</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#NonFiction</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Movies</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 5 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=5" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Automotive</h3>
            <p class="text-sm opacity-90">Vehicles & Parts</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Cars</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Motorcycles</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Parts</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 6 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=6" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Sports & Outdoors</h3>
            <p class="text-sm opacity-90">Gear & Activities</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Fitness</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Camping</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Cycling</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 7 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=7" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Health & Beauty</h3>
            <p class="text-sm opacity-90">Wellness & Cosmetics</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Skincare</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Haircare</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Supplements</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

      <!-- Tag Cloud Card 8 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out group">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/300?random=8" alt="Category Image" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500 ease-in-out">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
          <div class="absolute bottom-0 left-0 p-4 text-white">
            <h3 class="text-xl font-bold">Food & Beverages</h3>
            <p class="text-sm opacity-90">Groceries & Delicacies</p>
          </div>
        </div>
        <div class="p-4 sm:p-6">
          <div class="flex flex-wrap gap-2 mb-4">
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Organic</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Snacks</span>
            <span class="px-3 py-1 bg-amber-200 dark:bg-amber-700 text-amber-800 dark:text-amber-100 text-sm font-medium rounded-full shadow-sm hover:shadow-md transition-all duration-200 ease-in-out cursor-pointer">#Drinks</span>
          </div>
          <a href="#" class="inline-flex items-center text-amber-700 hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-100 font-semibold transition-colors duration-200 ease-in-out">
            View All <span class="ml-1 transform group-hover:translate-x-1 transition-transform duration-200 ease-in-out">&rarr;</span>
          </a>
        </div>
      </div>

    </div>

    <!-- Pagination Placeholder (for demonstrating complexity) -->
    <div class="flex justify-center mt-12 mb-4">
      <nav class="inline-flex rounded-md p-2 bg-white dark:bg-stone-800 shadow-lg dark:shadow-xl transition-all duration-300 ease-in-out" aria-label="Pagination">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium rounded-l-md text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          <span class="sr-only">Previous</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-amber-500 bg-amber-50 dark:bg-amber-900 text-sm font-medium text-amber-700 dark:text-amber-100 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          2
        </a>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-400 bg-stone-50 dark:bg-stone-900 cursor-default">
          ...
        </span>
        <a href="#" class="relative hidden md:inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          9
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-stone-200 dark:border-stone-700 text-sm font-medium rounded-r-md text-amber-800 dark:text-stone-300 bg-stone-50 hover:bg-amber-100 dark:bg-stone-900 dark:hover:bg-stone-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 ease-in-out">
          <span class="sr-only">Next</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          </svg>
        </a>
      </nav>
    </div>

  </div>
</div>

Notifications Component

A complex, responsive notifications component styled with Bauhaus-inspired elements using warm neutrals, suitable for documentation or wiki sites, with dark mode support.

Open Preview

                <div class="font-sans text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 min-h-screen">
  <div class="mx-auto max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">

    <!-- Header -->
    <div class="relative p-4 md:p-6 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600 flex justify-between items-center">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Notifications</h2>
      <button aria-label="Mark all as read" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Mark all as read
      </button>
      <div class="absolute top-0 left-0 w-full h-1 bg-yellow-500 dark:bg-yellow-400"></div>
    </div>

    <!-- Navigation / Filters -->
    <div class="flex border-b border-gray-200 dark:border-gray-600">
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-700 dark:text-gray-300 border-b-2 border-yellow-500 dark:border-yellow-400 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        All (4)
      </button>
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Unread (2)
      </button>
      <button class="flex-1 py-3 px-4 text-sm font-medium text-center text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        Archived (0)
      </button>
    </div>

    <!-- Notification List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700">

      <!-- Notification Item 1 (Unread, Alert) -->
      <div class="relative p-4 md:p-6 bg-yellow-50 dark:bg-gray-700 hover:bg-yellow-100 dark:hover:bg-gray-600 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-yellow-600 dark:text-yellow-400">
            <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">System Maintenance Alert</h3>
              <time datetime="2023-10-27T10:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">5 min ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Scheduled maintenance for our knowledge base will occur on Nov 1st. Expect brief downtime.</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Read more details</a>
          </div>
        </div>
        <div class="absolute top-2 right-2">
          <span aria-label="Unread indicator" class="block w-3 h-3 bg-blue-500 dark:bg-blue-400 rounded-full"></span>
        </div>
      </div>

      <!-- Notification Item 2 (Unread, New Feature) -->
      <div class="relative p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-green-600 dark:text-green-400">
            <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">New Feature: Advanced Search Filters</h3>
              <time datetime="2023-10-26T15:30:00Z" class="text-xs text-gray-500 dark:text-gray-400">1 day ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">We've rolled out new filters to help you find documentation faster. Try them out!</p>
            <div class="relative w-full h-32 mb-2 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden">
                 <img src="https://picsum.photos/400/200?random=1" alt="New feature screenshot" class="absolute inset-0 w-full h-full object-cover" />
            </div>
            <div class="flex space-x-2">
              <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">View demo</a>
              <a href="#" class="inline-block text-sm text-gray-600 dark:text-gray-400 hover:underline hover:text-gray-800 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Give feedback</a>
            </div>
          </div>
        </div>
        <div class="absolute top-2 right-2">
          <span aria-label="Unread indicator" class="block w-3 h-3 bg-blue-500 dark:bg-blue-400 rounded-full"></span>
        </div>
      </div>

      <!-- Notification Item 3 (Read, User Activity) -->
      <div class="p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <div class="flex-shrink-0 mr-4 rounded-full overflow-hidden w-9 h-9">
              <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User avatar" class="w-full h-full object-cover" />
          </div>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">John Doe commented on 'Getting Started'</h3>
              <time datetime="2023-10-25T09:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">2 days ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300">"Great article! I found the section on initial setup particularly helpful."</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Reply to comment</a>
          </div>
        </div>
      </div>

      <!-- Notification Item 4 (Read, Article Update) -->
      <div class="p-4 md:p-6 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
        <div class="flex items-start">
          <span class="flex-shrink-0 mr-4 text-blue-600 dark:text-blue-400">
            <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0015.586 6H9m-6 0h.01M6 21v-7a3 3 0 013-3h.482m-.509 5.867 2.1-2.101M16 17a2 2 0 100 4 2 2 0 000-4z"></path>
            </svg>
          </span>
          <div class="flex-grow">
            <div class="flex justify-between items-baseline mb-1">
              <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Article Updated: 'Troubleshooting FAQ'</h3>
              <time datetime="2023-10-24T18:00:00Z" class="text-xs text-gray-500 dark:text-gray-400">3 days ago</time>
            </div>
            <p class="text-gray-700 dark:text-gray-300">The 'Troubleshooting FAQ' article has been updated with new solutions for common issues.</p>
            <a href="#" class="inline-block text-sm text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">View updated article</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer / CTA -->
    <div class="p-4 md:p-6 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 flex justify-center items-center">
      <button aria-label="View all notifications" class="text-blue-600 dark:text-blue-400 hover:underline hover:text-blue-800 dark:hover:text-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200">
        View all notifications
      </button>
      <div class="absolute bottom-0 right-0 w-1 h-32 bg-yellow-500 dark:bg-yellow-400 hidden sm:block"></div>
    </div>

  </div>
</div>

Art_Deco_Government_Modal

A responsive, Art Deco-inspired modal component for government and public service websites, featuring geometric patterns, luxurious styling, and an analogous color scheme. Includes dark mode support.

Open Preview

                <div class="fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 flex items-center justify-center p-4">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-emerald-100 to-emerald-300 dark:from-sky-900 dark:to-teal-950 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-out scale-100 opacity-100 border-4 border-emerald-500 dark:border-teal-400">
    <!-- Art Deco Top Border -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 dark:from-teal-600 dark:via-sky-600 dark:to-cyan-600 transform skew-y-1 -translate-y-2"></div>
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-700 dark:from-teal-700 dark:via-sky-700 dark:to-cyan-700 transform skew-y-1 -translate-y-1"></div>

    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 pb-4 bg-transparent border-b border-emerald-400 dark:border-teal-800 relative z-10">
      <h3 class="text-2xl md:text-3xl font-serif tracking-wide text-emerald-800 dark:text-teal-200 drop-shadow-lg" style="text-shadow: 2px 2px 0px rgba(0,0,0,0.1);">
        <i class="fas fa-balance-scale mr-3 text-emerald-600 dark:text-teal-400"></i>
        Official Notice
      </h3>
      <button type="button" class="text-emerald-700 dark:text-teal-300 hover:text-emerald-900 dark:hover:text-teal-100 transform rotate-45 transition-transform duration-200 text-3xl leading-none font-light focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 rounded-full w-8 h-8 flex items-center justify-center">
        +
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 text-gray-800 dark:text-gray-100 relative">
      <div class="absolute inset-0 bg-white dark:bg-gray-800 opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);"></div>
      <img src="https://picsum.photos/400/250" alt="Art Deco Building" class="w-full h-40 object-cover mb-4 rounded-md shadow-lg border-2 border-emerald-400 dark:border-teal-700 pointer-events-none">
      <p class="mb-4 text-base md:text-lg leading-relaxed">
        Dear Citizen,
        <br><br>
        We understand the importance of clear and timely communication. Please review the following critical information pertaining to our latest public service initiatives. Your engagement is vital for the betterment of our community.
      </p>
      <ul class="list-disc list-inside space-y-2 text-sm md:text-base mb-6 pl-4">
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">New Regulations:</strong> Effective <span class="font-semibold">October 26, 2024</span>.
        </li>
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">Public Forum:</strong> Scheduled online for <span class="font-semibold">November 10, 2024, 2:00 PM EST</span>.
        </li>
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">Support Line:</strong> Available M-F, 9 AM - 5 PM at <a href="tel:+18001234567" class="underline hover:no-underline text-cyan-600 dark:text-amber-300">1-800-123-4567</a>.
        </li>
      </ul>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-200">
        Thank you for your continued cooperation and understanding. We are committed to serving you.
      </p>
    </div>

    <!-- Modal Footer -->
    <div class="p-6 pt-4 bg-transparent border-t border-emerald-400 dark:border-teal-800 flex justify-end space-x-3 relative z-10">
      <button type="button" class="px-6 py-2 rounded-lg text-sm font-medium transition duration-200 ease-in-out
        bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-lg 
        hover:from-emerald-600 hover:to-emerald-700 
        dark:from-teal-600 dark:to-teal-700 dark:text-gray-100 dark:shadow-xl dark:hover:from-teal-700 dark:hover:to-teal-800
        focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-emerald-100 dark:focus:ring-offset-sky-900">
        Decline
      </button>
      <button type="button" class="px-6 py-2 rounded-lg text-sm font-medium transition duration-200 ease-in-out
        bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-lg 
        hover:from-cyan-700 hover:to-teal-700 
        dark:from-sky-500 dark:to-cyan-600 dark:text-gray-100 dark:shadow-xl dark:hover:from-sky-600 dark:hover:to-cyan-700
        focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-sky-400 focus:ring-offset-2 focus:ring-offset-emerald-100 dark:focus:ring-offset-sky-900">
        Accept & Proceed
      </button>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 dark:from-teal-600 dark:via-sky-600 dark:to-cyan-600 transform skew-y-1 translate-y-2"></div>
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-700 dark:from-teal-700 dark:via-sky-700 dark:to-cyan-700 transform skew-y-1 translate-y-1"></div>
  </div>
</div>

Memphis_Weather_Progress_Indicator

A weather progress indicator component with a Memphis design style, featuring bold black and white with a bright accent color, suitable for displaying climate data. It includes responsive design and dark mode support.

Open Preview

                <div class="p-4 sm:p-8 md:p-12 min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-gray-900 dark:border-gray-50 transform skew-y-2 lg:skew-y-0 lg:skew-x-2 transition-all duration-300">
    <div class="relative p-6 sm:p-8 md:p-10 lg:p-12 grid grid-cols-1 md:grid-cols-2 gap-8 text-center md:text-left">
      
      <!-- Accent Background Shape -->
      <div class="absolute inset-0 bg-fuchsia-500 dark:bg-teal-500 opacity-80 z-0 transform -rotate-3 translate-x-2 translate-y-2 rounded-lg"></div>
      <div class="absolute inset-0 bg-fuchsia-500 dark:bg-teal-500 opacity-80 z-0 transform rotate-2 translate-x-4 translate-y-4 rounded-lg"></div>

      <div class="relative z-10 flex flex-col items-center md:items-start justify-center">
        <h2 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-extrabold mb-4 uppercase text-gray-900 dark:text-gray-50 leading-tight tracking-wider">
          Climate Progress
        </h2>
        <p class="text-sm sm:text-base md:text-lg text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
          Tracking key climate indicators for a sustainable future. Data insights at a glance.
        </p>
        <span class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-fuchsia-600 dark:text-teal-400 mb-4 transform -rotate-6">
          ⚡
        </span>
      </div>

      <div class="relative z-10 flex flex-col items-center justify-center gap-6">

        <!-- Progress Bar 1: Temperature Anomaly -->
        <div class="w-full">
          <div class="flex items-center justify-between mb-2">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Temperature Anomaly</p>
            <span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">+1.2°C</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
            <div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 70%;">
              <div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 70%;"></div>
            </div>
          </div>
          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">70% of limit</p>
        </div>

        <!-- Progress Bar 2: Sea Level Rise -->
        <div class="w-full">
          <div class="flex items-center justify-between mb-2">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sea Level Rise</p>
            <span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">+0.8 cm/year</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
            <div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 45%;">
                <div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 45%;"></div>
            </div>
          </div>
          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">45% of forecast</p>
        </div>

        <!-- Progress Bar 3: CO2 Concentration -->
        <div class="w-full">
          <div class="flex items-center justify-between mb-2">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">CO2 Concentration</p>
            <span class="text-xl font-bold text-fuchsia-600 dark:text-teal-400">419 ppm</span>
          </div>
          <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 sm:h-5 md:h-6 overflow-hidden relative border-2 border-gray-900 dark:border-gray-50">
            <div class="h-full bg-fuchsia-500 dark:bg-teal-500 rounded-full transition-all duration-700 ease-out" style="width: 85%;">
                <div class="absolute inset-0 bg-fuchsia-600 dark:bg-teal-600 opacity-30 transform -skew-x-12" style="width: 85%;"></div>
            </div>
          </div>
          <p class="text-xs text-gray-600 dark:text-gray-400 mt-1 text-right">85% above pre-industrial</p>
        </div>

      </div>
    </div>

    <!-- Decorative Bottom Bar -->
    <div class="relative h-12 sm:h-16 md:h-20 bg-gray-900 dark:bg-gray-50 flex items-center justify-center border-t-4 border-gray-50 dark:border-gray-900 transform -skew-y-2 lg:skew-y-0 lg:skew-x-2 transition-all duration-300">
        <div class="absolute inset-0 bg-fuchsia-700 dark:bg-teal-700 opacity-80 z-0 transform rotate-3 scale-x-105"></div>
        <span class="relative z-10 text-xl sm:text-2xl font-bold text-white dark:text-gray-900 uppercase tracking-widest">Climate Insights</span>
    </div>
  </div>
</div>

Carousel Slider Component

A simple, responsive carousel slider component designed for sports/fitness applications with a dark mode UI, black and white color scheme, and a bright accent color.

Open Preview

                <div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
  <div class="overflow-hidden rounded-lg">
    <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
      <!-- Slide 1 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports1/1200/800" alt="Fitness Training" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Intense Training Session</h3>
          <p class="text-base text-gray-200">Push your limits and achieve your fitness goals with our advanced programs.</p>
        </div>
      </div>
      <!-- Slide 2 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports2/1200/800" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Teamwork Makes the Dream Work</h3>
          <p class="text-base text-gray-200">Join a community of athletes and elevate your performance together.</p>
        </div>
      </div>
      <!-- Slide 3 -->
      <div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
        <img src="https://picsum.photos/seed/sports3/1200/800" alt="Healthy Lifestyle" class="absolute inset-0 w-full h-full object-cover opacity-70" />
        <div class="relative z-10 text-white">
          <h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Embrace a Healthier You</h3>
          <p class="text-base text-gray-200">Discover personalized routines and nutritional guidance for a better lifestyle.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- Navigation Buttons (for visual representation, functionality would require JS) -->
  <button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
    <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="M15 19l-7-7 7-7"></path></svg>
  </button>
  <button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
    <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="M9 5l7 7-7 7"></path></svg>
  </button>
  <!-- Dots/Indicators (for visual representation, functionality would require JS) -->
  <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
    <span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
  </div>
</div>

Skeuomorphic_Grid_Layout_Business

A complex, responsive grid layout component for business/corporate websites, featuring a skeuomorphic design style with warm neutral colors and dark mode support. Elements mimic real-world objects with depth and subtle textures.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 text-stone-800 dark:from-stone-900 dark:to-stone-950 dark:text-stone-200 p-4 sm:p-8 font-sans transition-colors duration-300">

  <!-- Skeuomorphic Top Bar / Header -->
  <header class="relative mb-8 rounded-xl bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-4 sm:p-6 shadow-xl 
               hover:shadow-2xl transition-all duration-300
               before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
               after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20">
    <div class="flex flex-col sm:flex-row items-center justify-between z-10 relative">
      <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-stone-700 dark:text-stone-300 drop-shadow-md">Corporate Dashboard</h1>
      <div class="mt-4 sm:mt-0 flex flex-wrap gap-3">
        <button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700 
                       shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
          <span class="relative z-10">Reports</span>
        </button>
        <button class="relative px-5 py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-600 dark:to-stone-700 
                       shadow-lg hover:shadow-xl active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
          <span class="relative z-10">Settings</span>
        </button>
      </div>
    </div>
  </header>

  <main class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Skeuomorphic Card 1 - Project Overview -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Project Overview</h2>
      <p class="text-stone-600 dark:text-stone-400 leading-relaxed mb-4">Track the progress of our current initiatives and upcoming milestones. Stay informed on key performance indicators.</p>
      <div class="grid grid-cols-2 gap-4">
        <div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Completed</p>
          <p class="text-2xl font-bold text-green-700 dark:text-green-400">75%</p>
        </div>
        <div class="relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <p class="text-sm text-stone-700 dark:text-stone-300 font-medium">Pending</p>
          <p class="text-2xl font-bold text-amber-700 dark:text-amber-400">25%</p>
        </div>
      </div>
      <button class="relative mt-6 w-full py-2 rounded-lg text-lg font-semibold text-stone-700 dark:text-stone-300 
                     bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                     shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                     before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                     after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                     focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
        <span class="relative z-10">View Details</span>
      </button>
    </section>

    <!-- Skeuomorphic Card 2 - Team Members -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Team Members</h2>
      <ul class="space-y-4">
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">John Doe</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Lead Developer</p>
          </div>
        </li>
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Avatar of Jane Smith" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">Jane Smith</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Project Manager</p>
          </div>
        </li>
        <li class="flex items-center gap-4 relative p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of Bob Johnson" class="w-12 h-12 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="font-medium text-stone-700 dark:text-stone-300">Bob Johnson</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">UI/UX Designer</p>
          </div>
        </li>
      </ul>
    </section>

    <!-- Skeuomorphic Card 3 - Quick Links -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Quick Links</h2>
      <nav>
        <ul class="space-y-3">
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M3 5h18M5 9h14M8 9V5m8 4V5m-1 7l-4 4m0 0l-4-4m4 4V13" />
              </svg>
              <span class="relative z-10">Knowledge Base</span>
            </a>
          </li>
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h8m-8 4h8m-9 4h8M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <span class="relative z-10">Upcoming Events</span>
            </a>
          </li>
          <li>
            <a href="#" class="relative flex items-center gap-2 py-2 px-4 rounded-lg text-lg text-stone-700 dark:text-stone-300 
                       bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 
                       shadow-md hover:shadow-lg active:shadow-inner transition-all duration-200
                       before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5 
                       after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-stone-500/50 dark:after:shadow-black/20 
                       focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-900">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-600 dark:text-stone-400 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h10M7 16h10M9 1h6a2 2 0 012 2v14a2 2 0 01-2 2H9a2 2 0 01-2-2V3a2 2 0 012-2z" />
              </svg>
              <span class="relative z-10">Support Tickets</span>
            </a>
          </li>
        </ul>
      </nav>
    </section>

    <!-- Skeuomorphic Card 4 - Recent Activity (Spans two columns on larger screens) -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 lg:col-span-1 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Recent Activity</h2>
      <ul class="space-y-4">
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Sarah Connor</span> updated a project.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">2 hours ago</p>
          </div>
        </li>
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Michael Scott</span> submitted a report.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">Yesterday</p>
          </div>
        </li>
        <li class="relative flex items-center gap-4 p-3 rounded-lg bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-400 dark:border-stone-600 shadow-inner-strong">
          <div>
            <p class="text-stone-700 dark:text-stone-300"><span class="font-medium">Dwight Schrute</span> added a new task.</p>
            <p class="text-sm text-stone-600 dark:text-stone-400">3 days ago</p>
          </div>
        </li>
      </ul>
    </section>

    <!-- Skeuomorphic Card 5 - Important Notices -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Important Notices</h2>
      <div class="space-y-4">
        <div class="relative p-4 rounded-lg bg-red-200 dark:bg-red-800 text-red-800 dark:text-red-200 font-semibold 
                    shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-red-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-red-400/50 dark:after:shadow-black/20">
          <p>System Maintenance: Jan 15th, 10 PM - 2 AM PST.</p>
        </div>
        <div class="relative p-4 rounded-lg bg-amber-200 dark:bg-amber-800 text-amber-800 dark:text-amber-200 font-semibold 
                    shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-amber-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-lg after:shadow-inner after:shadow-amber-400/50 dark:after:shadow-black/20">
          <p>New Security Update available for all users.</p>
        </div>
      </div>
    </section>

    <!-- Skeuomorphic Card 6 - Image Gallery (Spans two columns on larger screens) -->
    <section class="relative rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-6 shadow-xl 
                    hover:shadow-2xl transition-all duration-300 col-span-1 md:col-span-2 
                    before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                    after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
      <h2 class="text-xl font-semibold mb-4 text-stone-700 dark:text-stone-300 drop-shadow-sm">Office Snapshots</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1018/200/150" alt="Office view" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1020/200/150" alt="Meeting room" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1025/200/150" alt="Workstation" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
        <div class="relative rounded-lg overflow-hidden border-2 border-stone-300 dark:border-stone-700 shadow-md 
                    before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-stone-200/50 dark:before:shadow-white/5">
          <img src="https://picsum.photos/id/1021/200/150" alt="Coffee break" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        </div>
      </div>
    </section>

  </main>

  <!-- Footer as a subtle skeuomorphic element -->
  <footer class="relative mt-8 rounded-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 p-4 shadow-xl 
                  before:absolute before:inset-0 before:rounded-xl before:shadow-inner before:shadow-stone-100/50 dark:before:shadow-white/5 
                  after:absolute after:inset-0 after:rounded-xl after:shadow-inner after:shadow-stone-400/50 dark:after:shadow-black/20">
    <p class="text-center text-sm text-stone-600 dark:text-stone-400">&copy; 2023 Corporate Solutions Inc. All rights reserved.</p>
  </footer>

</div>

Paper_Print_Sepia_Sports_Map_Component

A responsive map-like component for sports/fitness applications with a paper/print-inspired design and sepia/brown color scheme. It includes a simulated map area, location pins, and a legend, with full dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 min-h-screen">

  <div class="max-w-6xl mx-auto bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden
              border border-stone-200 dark:border-stone-700
              transform transition-all duration-300 hover:shadow-2xl">

    <!-- Header Section -->
    <div class="bg-stone-100 dark:bg-stone-700 p-4 sm:p-5 flex items-center justify-between
                border-b border-stone-200 dark:border-stone-600
                relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
      <h2 class="text-xl sm:text-2xl font-serif text-stone-800 dark:text-stone-200
                 relative z-10 font-bold tracking-wide">Training Ground Map</h2>
      <button aria-label="View Settings" class="relative z-10 p-2 rounded-full bg-stone-200 dark:bg-stone-600
                         hover:bg-stone-300 dark:hover:bg-stone-500 transition-colors duration-200
                         shadow-sm dark:shadow-md">
        <svg class="w-5 h-5 text-stone-600 dark:text-stone-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.49 3.17c-.389-.111-.796-.16-1.21-.16s-.822.049-1.21.16zM9.54 2.1c.427-.122.875-.18 1.35-.18s.923.058 1.35.18l.8-.8a.75.75 0 011.06 0l1.25 1.25a.75.75 0 010 1.06l-.775.775a.75.75 0 00-.012.012c.11.23.2.47.27.708l.775.776a.75.75 0 010 1.06l-1.25 1.25a.75.75 0 01-1.06 0l-.775-.775a.75.75 0 00-.01-.01c-.24.11-.49.2-.748.27l-.776.775a.75.75 0 01-1.06 0l-1.25-1.25a.75.75 0 010-1.06l.775-.775a.75.75 0 00.01-.012c-.11-.23-.2-.47-.27-.708l-.775-.776a.75.75 0 010-1.06l1.25-1.25a.75.75 0 011.06 0l.775.775a.75.75 0 00.012.01z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M7.22 8.35s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 13.65s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35zM7.22 18.95s.893-.33 1.948-.33c1.055 0 1.948.33 1.948.33s.893.33 1.948-.33a.75.75 0 000-1.35s-.893-.33-1.948-.33c-1.055 0-1.948.33-1.948.33s-.893.33-1.948-.33a.75.75 0 000 1.35z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0">

      <!-- Left Sidebar: Map Controls & Legend -->
      <div class="md:col-span-1 p-4 sm:p-5 bg-stone-50 dark:bg-stone-700
                  border-r-0 md:border-r border-b md:border-b-0 border-stone-200 dark:border-stone-600
                  relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-40 dark:opacity-5"></div>

        <div class="relative z-10 space-y-6">

          <!-- Map Controls -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Map Controls</h3>
            <div class="space-y-3">
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 10a.5.5 0 01.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H6a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Zoom In
              </button>
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.5 10.5a.5.5 0 01-.5-.5h2.5V7a.5.5 0 011 0v2.5h2.5a.5.5 0 010 1H9.5v2.5a.5.5 0 01-1 0V10.5H7z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd"></path></svg>
                Zoom Out
              </button>
              <button class="w-full flex items-center justify-center p-2 rounded-md bg-amber-100 dark:bg-stone-600 text-amber-800 dark:text-stone-200
                             shadow-sm hover:shadow-md transition-all duration-200
                             border border-amber-200 dark:border-stone-500
                             hover:bg-amber-200 dark:hover:bg-stone-500">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm-5 8a.8.8 0 01.8-.8h8.4a.8.8 0 010 1.6H5.8A.8.8 0 015 10z"></path></svg>
                Recenter
              </button>
            </div>
          </div>

          <!-- Legend -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Legend</h3>
            <ul class="space-y-2 text-sm text-stone-700 dark:text-stone-300">
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-red-500 dark:bg-red-600 shadow-sm"></span> Training Field</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-blue-500 dark:bg-blue-600 shadow-sm"></span> Water Station</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-emerald-500 dark:bg-emerald-600 shadow-sm"></span> First Aid</li>
              <li class="flex items-center"><span class="w-4 h-4 mr-2 rounded-full bg-purple-500 dark:bg-purple-600 shadow-sm"></span> Rest Area</li>
            </ul>
          </div>

          <!-- Quick Stats (Example) -->
          <div>
            <h3 class="text-lg font-bold font-serif mb-3 text-stone-700 dark:text-stone-200">Workout Overview</h3>
            <div class="space-y-2 text-stone-700 dark:text-stone-300">
              <p class="flex justify-between"><span>Total Distance:</span> <span class="font-semibold">5.2 km</span></p>
              <p class="flex justify-between"><span>Elevation Gain:</span> <span class="font-semibold">120 m</span></p>
              <p class="flex justify-between"><span>Avg Pace:</span> <span class="font-semibold">5:15 /km</span></p>
            </div>
          </div>

        </div>
      </div>

      <!-- Main Map Area -->
      <div class="md:col-span-2 lg:col-span-3 bg-amber-100 dark:bg-stone-900 min-h-[400px] md:min-h-[600px] lg:min-h-[700px]
                  flex items-center justify-center relative shadow-inner p-4 sm:p-6
                  border-l-0 md:border-l border-stone-200 dark:border-stone-700">
        <img src="https://picsum.photos/1200/800?grayscale&blur=2" alt="Placeholder map of training grounds" 
             class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-screen
             transform scale-105 filter sepia dark:invert dark:sepia-0 dark:contrast-125 dark:brightness-75">
        
        <div class="relative z-10 w-full h-full flex flex-col justify-center items-center p-4">
          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-serif text-stone-800 dark:text-stone-200 font-bold mb-6 text-center
                     drop-shadow-lg text-shadow-sm filter backdrop-blur-sm bg-white/20 dark:bg-stone-900/20 p-3 rounded-xl
                     border border-stone-300 dark:border-stone-600 
                     "><span class="hidden sm:inline">Interactive </span>Training Map</h2>

          <!-- Simulated Map Pins -->
          <div class="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-red-500 dark:bg-red-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-red-500 dark:border-t-red-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Field A (Football)</span>
          </div>
          <div class="absolute top-2/3 right-1/4 transform translate-x-1/2 translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-blue-500 dark:bg-blue-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-blue-500 dark:border-t-blue-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Water Station 1</span>
          </div>
          <div class="absolute top-1/2 right-1/2 transform translate-x-1/2 -translate-y-1/2 flex flex-col items-center group cursor-pointer">
            <div class="w-6 h-6 rounded-full bg-emerald-500 dark:bg-emerald-600 border-2 border-white dark:border-stone-800 shadow-md animate-bounce-short group-hover:scale-125 transition-transform duration-200"></div>
            <div class="w-0 h-0 border-l-4 border-r-4 border-t-8 border-transparent border-t-emerald-500 dark:border-t-emerald-600"></div>
            <span class="absolute top-full mt-2 bg-stone-700 dark:bg-stone-900 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Medical Tent</span>
          </div>

          <!-- Call to Action / Info Box -->
          <div class="absolute bottom-8 right-8 bg-white dark:bg-stone-700 rounded-lg p-3 sm:p-4 shadow-lg
                      border border-stone-200 dark:border-stone-600 max-w-xs text-sm
                      transform translate-y-0 hover:-translate-y-1 transition-transform duration-300
                      hidden sm:block">
            <div class="dark:text-stone-300 text-stone-700">
              <p class="font-bold font-serif mb-2 text-base text-stone-800 dark:text-stone-200">Ready to Explore?</p>
              <p>Click on the pins for more details about different areas. Track your progress here!</p>
              <button class="mt-3 w-full bg-amber-700 dark:bg-amber-600 text-white py-2 rounded-md
                             hover:bg-amber-800 dark:hover:bg-amber-500 transition-colors duration-200
                             shadow-md dark:shadow-lg">Start Tracking</button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- Footer (simple for this component) -->
    <div class="bg-stone-100 dark:bg-stone-700 p-3 sm:p-4 text-center
                border-t border-stone-200 dark:border-stone-600
                relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/epoxy-dark.png')] opacity-20 dark:opacity-5"></div>
      <p class="text-xs text-stone-600 dark:text-stone-400 relative z-10">Data provided by GeoFit Innovations &copy; 2023</p>
    </div>

  </div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600&display=swap');
  .font-sans { font-family: 'Open Sans', sans-serif; }
  .font-serif { font-family: 'Merriweather', serif; }

  /* Custom keyframes for ping animation */
  @keyframes bounce-short {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-short {
    animation: bounce-short 1.5s infinite;
  }
</style>

Industrial_Candy_Login_Signup_Component

A responsive login/signup component with an industrial raw aesthetic combined with bright candy colors. Features exposed elements, utilitarian design, and full dark mode support, suitable for a blog or content platform.

Open Preview

                <div class="min-h-screen bg-pink-100 flex items-center justify-center p-4 dark:bg-gray-900 duration-300">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden max-w-4xl w-full flex flex-col md:flex-row border-4 border-gray-300 dark:border-gray-700 relative">
    <!-- Decorative Industrial Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 11px), repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 11px);">
    </div>

    <!-- Image Section -->
    <div class="md:w-1/2 p-6 flex flex-col items-center justify-center bg-pink-200 dark:bg-gray-700 relative overflow-hidden">
      <img src="https://picsum.photos/600/400?random=1" alt="Industrial Candy Aesthetic" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-pink-300 dark:border-gray-600 mb-4 transform hover:scale-105 transition-transform duration-300">
      <h2 class="text-2xl font-extrabold text-pink-700 dark:text-pink-300 mb-2 font-mono">Access Your Content</h2>
      <p class="text-pink-600 dark:text-pink-400 text-center text-sm px-4">Discover a new world of articles and stories. Join our community!</p>
      <div class="absolute bottom-2 left-2 text-pink-500 dark:text-pink-400 text-xs opacity-70">V1.0</div>
    </div>

    <!-- Forms Section -->
    <div class="md:w-1/2 p-8 flex flex-col justify-center dark:bg-gray-800">
      <div class="flex mb-6 space-x-4">
        <button class="flex-1 py-3 px-4 rounded-lg font-semibold text-pink-700 dark:text-pink-200 bg-pink-300 dark:bg-pink-600 hover:bg-pink-400 dark:hover:bg-pink-700 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 shadow-md transform hover:-translate-y-0.5">
          Login
        </button>
        <button class="flex-1 py-3 px-4 rounded-lg font-semibold text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 transition-all duration-200 shadow-md transform hover:-translate-y-0.5">
          Signup
        </button>
      </div>

      <!-- Login Form (Visible by default, can be toggled via JS if implemented) -->
      <form class="space-y-6">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center font-mono">Welcome Back!</h3>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required class="mt-1 block w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-500 focus:border-mint-500 dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition duration-200">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" placeholder="••••••••" autocomplete="current-password" required class="mt-1 block w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-500 focus:border-mint-500 dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition duration-200">
        </div>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember_me" name="remember_me" type="checkbox" class="h-4 w-4 text-mint-600 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 focus:ring-mint-500">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-mint-600 hover:text-mint-500 text-sm dark:text-mint-400 dark:hover:text-mint-300 transition duration-200">Forgot your password?</a>
        </div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-bold text-white bg-mint-500 dark:bg-mint-600 hover:bg-mint-600 dark:hover:bg-mint-700 focus:outline-none focus:ring-4 focus:ring-mint-500 dark:focus:ring-mint-400 transition-all duration-200 transform hover:scale-105">
          Sign in
        </button>
      </form>

      <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        Or continue with
      </div>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 rounded-full bg-blue-500 hover:bg-blue-600 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-blue-400" aria-label="Login with Facebook">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="flex items-center justify-center p-3 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-red-400" aria-label="Login with Google">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.24 10.23L12 10l-6-1.5V10c0 .6.4 1 1 1h5.5l.5-.23zM21 12h-8v-2h8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
            <path d="M12 4.41l-.7-.7-.7-.7h-1.2V3h3.5v2.41zM12 19.59l.7.7.7.7h1.2v-2.41zM20 12h-8v-2h8z"/>
          </svg>
        </button>
        <button class="flex items-center justify-center p-3 rounded-full bg-gray-700 hover:bg-gray-800 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-gray-400" aria-label="Login with GitHub">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.68-.233.68-.522 0-.257-.01-1.055-.016-2.056-2.78-.62-3.37-1.39-3.37-1.39-.454-1.15-1.11-1.455-1.11-1.455-.908-.62.067-.607.067-.607 1.005.07 1.532 1.03 1.532 1.03.89 1.488 2.33 1.056 2.897.807.09-.624.34-1.056.62-1.3-2.22-.25-4.555-1.11-4.555-4.93 0-1.088.39-1.979 1.029-2.678-.103-.255-.446-1.272.098-2.646 0 0 .84-.27 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.374.203 2.391.098 2.646.64.699 1.029 1.59 1.029 2.678 0 3.832-2.339 4.68-4.566 4.92.359.307.678.915.678 1.849 0 1.334-.012 2.41-.012 2.727 0 .29.21.613.695.516C19.137 20.103 22 16.364 22 12.017 22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Monospace Social Media Navigation

A complex, responsive navigation component for social media applications, featuring a monospace/developer aesthetic with muted colors and dark mode support. Includes user profile, search, notifications, and primary navigation links.

Open Preview

                <nav class="bg-gray-100 text-gray-800 dark:bg-gray-950 dark:text-gray-200 p-4 border-b border-gray-300 dark:border-gray-800 font-mono">
  <div class="container mx-auto flex flex-wrap items-center justify-between gap-4">
    <!-- Logo/Brand Name -->
    <div class="flex-shrink-0">
      <a href="#" class="text-xl font-bold text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <span class="text-blue-600 dark:text-blue-400">//</span>social_feed
      </a>
    </div>

    <!-- Mobile Menu Toggle -->
    <button id="menu-toggle" class="lg:hidden p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200" aria-label="Toggle navigation">
      <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"></path>
      </svg>
    </button>

    <!-- Primary Navigation Links (Hidden on mobile by default) -->
    <div id="nav-menu" class="hidden lg:flex flex-grow items-center justify-center space-x-6 text-sm flex-col lg:flex-row w-full lg:w-auto mt-4 lg:mt-0">
      <ul class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-6 w-full lg:w-auto text-center lg:text-left">
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>feed
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>explore
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>groups
          </a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 lg:p-0 rounded-md lg:rounded-none text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline hover:underline-offset-4 decoration-2 decoration-blue-600 dark:decoration-blue-400 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            <span class="text-blue-600 dark:text-blue-400">~</span>messages
          </a>
        </li>
      </ul>
    </div>

    <!-- Right-aligned Icons and User Profile -->
    <div class="flex items-center space-x-4 flex-shrink-0 lg:ml-auto">
      <!-- Search Bar -->
      <div class="relative hidden sm:block">
        <input type="text" placeholder="search_user(" class="bg-gray-200 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md py-2 pl-4 pr-10 text-sm text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-all duration-200 w-32 md:w-48 lg:w-64 placeholder-gray-500 dark:placeholder-gray-500">
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-500 text-xs">)</span>
      </div>
      
      <!-- Notification Icon -->
      <a href="#" aria-label="Notifications" class="relative p-2 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        <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="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"></path>
        </svg>
        <span class="absolute top-1 right-1 block w-2 h-2 rounded-full bg-red-500 border border-gray-100 dark:border-gray-950"></span>
      </a>

      <!-- User Profile Dropdown -->
      <div class="relative">
        <button id="profile-menu-button" class="flex items-center space-x-2 p-2 rounded-md text-gray-900 dark:text-gray-100 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="User menu">
          <img class="w-8 h-8 rounded-full border-2 border-blue-600 dark:border-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
          <span class="hidden md:inline text-sm">user@system</span>
          <svg class="w-4 h-4 ml-1" 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="M19 9l-7 7-7-7"></path>
          </svg>
        </button>
        
        <div id="profile-menu-dropdown" class="absolute right-0 mt-2 hidden w-48 bg-gray-100 dark:bg-gray-900 rounded-md shadow-lg py-1 border border-gray-300 dark:border-gray-800 origin-top-right z-10">
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>profile
          </a>
          <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>settings
          </a>
          <div class="border-t border-gray-300 dark:border-gray-800 my-1"></div>
          <a href="#" class="block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
            <span class="text-blue-600 dark:text-blue-400">$</span>logout
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

<script>
  // Basic JavaScript for toggling mobile menu and profile dropdown
  document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.getElementById('menu-toggle');
    const navMenu = document.getElementById('nav-menu');
    const profileMenuButton = document.getElementById('profile-menu-button');
    const profileMenuDropdown = document.getElementById('profile-menu-dropdown');

    menuToggle.addEventListener('click', function() {
      navMenu.classList.toggle('hidden');
      navMenu.classList.toggle('flex'); // Add flex for mobile menu to stack vertically
    });

    profileMenuButton.addEventListener('click', function() {
      profileMenuDropdown.classList.toggle('hidden');
    });

    // Close dropdowns when clicking outside
    document.addEventListener('click', function(event) {
      if (!profileMenuButton.contains(event.target) && !profileMenuDropdown.contains(event.target)) {
        profileMenuDropdown.classList.add('hidden');
      }
      // For mobile menu, only close if clicking outside of the menu area itself but allow clicks within the menu
      if (!menuToggle.contains(event.target) && !navMenu.contains(event.target) && window.innerWidth < 1024) {
        navMenu.classList.add('hidden');
        navMenu.classList.remove('flex');
      }
    });

    // Handle window resize for responsiveness
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 1024) { // Equivalent to Tailwind's 'lg' breakpoint
        navMenu.classList.remove('hidden', 'flex');
        navMenu.classList.add('flex'); // Ensure it's flex on desktop
      } else {
        if (navMenu.classList.contains('flex')) { // If it was opened on mobile, keep it open, otherwise hide
             // Do nothing if it's already flex, as it means it was opened by menuToggle
        } else {
            navMenu.classList.add('hidden');
            navMenu.classList.remove('flex');
        }
      }
       profileMenuDropdown.classList.add('hidden'); // Close profile dropdown on resize
    });
  });
<\/script>

Grid Layout Component - Finance/Banking

A responsive grid layout component for finance/banking applications, featuring a clean Material Design aesthetic with warm neutrals and dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-zinc-900 p-4 sm:p-6 md:p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl sm:text-4xl font-bold text-stone-800 dark:text-stone-100 mb-6 text-center md:text-left">
      Dashboard Overview
    </h1>

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

      <!-- Card 1: Account Balance -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Current Balance</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
          </svg>
        </div>
        <p class="text-3xl font-bold text-stone-800 dark:text-stone-50 mb-2">$12,345.67</p>
        <p class="text-sm text-stone-500 dark:text-stone-400">Available funds</p>
      </div>

      <!-- Card 2: Recent Transactions -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Recent Activity</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
          </svg>
        </div>
        <ul class="space-y-3">
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Netflix Subscription</span>
            <span class="font-medium text-red-600 dark:text-red-400">-$15.99</span>
          </li>
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Salary Deposit</span>
            <span class="font-medium text-emerald-600 dark:text-emerald-400">+$2,500.00</span>
          </li>
          <li class="flex justify-between text-stone-600 dark:text-stone-300">
            <span>Coffee Shop</span>
            <span class="font-medium text-red-600 dark:text-red-400">-$4.50</span>
          </li>
        </ul>
        <a href="#" class="mt-4 block text-center text-sm text-amber-600 dark:text-amber-400 hover:underline">View all transactions</a>
      </div>

      <!-- Card 3: Savings Goal -->
      <div class="bg-white dark:bg-zinc-800 rounded-lg shadow-md p-6 transform hover:scale-105 transition-transform duration-300">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl font-semibold text-stone-700 dark:text-stone-200">Savings Goal</h2>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-sky-500 dark:text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0V6a1 1 0 011-1h2a1 1 0 011 1v13m-6 0h6" />
          </svg>
        </div>
        <p class="text-2xl font-bold text-stone-800 dark:text-stone-50">$5,000 / $10,000</p>
        <div class="w-full bg-stone-200 dark:bg-zinc-700 rounded-full h-2.5 mt-2 mb-3">
          <div class="bg-sky-500 dark:bg-sky-400 h-2.5 rounded-full" style="width: 50%"></div>
        </div>
        <p class="text-sm text-stone-500 dark:text-stone-400">50% achieved for 'New Car Fund'</p>
        <a href="#" class="mt-4 block text-center text-sm text-amber-600 dark:text-amber-400 hover:underline">Manage goals</a>
      </div>

    </div>

    <!-- Optional: Footer or Disclaimer -->
    <p class="mt-8 text-center text-sm text-stone-500 dark:text-zinc-600">
      Data as of <time datetime="2023-10-27">October 27, 2023</time>. Subject to change.
    </p>
  </div>
</div>

1 ... 98 99 100 101 102 ... 335