Search Components

All Components

Browse all available Tailwind CSS components

Glassmorphism Wishlist Component - Agriculture/Farming

A responsive wishlist component with a glassmorphism design style, pastel color scheme, and tailored for agriculture/farming websites. Features frosted glass-like translucent elements with blur effects, semantic HTML, and full dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-zinc-800 dark:to-slate-900 transition-all duration-500">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-lg">
      Your Harvest Wishlist
    </h1>

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

      <!-- Wishlist Item 1 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 to-pink-200/50 dark:from-purple-800/50 dark:to-pink-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/102/400/250" alt="Organic Carrots" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Heirloom Carrots</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">Sweet and vibrant heirloom carrots, perfect for fresh eating or roasting. Organically grown with care.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$4.50 / lb</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-sm">4.8 (120)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark: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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <!-- Wishlist Item 2 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-200/50 to-green-200/50 dark:from-blue-800/50 dark:to-green-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/1080/400/250" alt="Fresh Tomatoes" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Vine-Ripened Tomatoes</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">Juicy and flavorful tomatoes, ripened on the vine for peak taste. Ideal for salads or sauces.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$3.75 / lb</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-sm">4.7 (95)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark: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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <!-- Wishlist Item 3 -->
      <div class="relative p-6 sm:p-8 rounded-3xl overflow-hidden bg-white/30 dark:bg-gray-800/30 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
        <div class="absolute inset-0 bg-gradient-to-br from-red-200/50 to-orange-200/50 dark:from-red-800/50 dark:to-orange-800/50 opacity-30 blur-2xl -z-10"></div>
        <img src="https://picsum.photos/id/106/400/250" alt="Fresh Berries" class="w-full h-48 object-cover rounded-2xl mb-4 shadow-md border border-white/50 dark:border-gray-700/50">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Basket of Mixed Berries</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4 line-clamp-3">A delightful mix of strawberries, blueberries, and raspberries. Hand-picked for freshness and flavor.</p>
        <div class="flex items-center justify-between text-gray-800 dark:text-gray-200 mb-4">
          <span class="block text-lg font-bold text-green-700 dark:text-green-400">$6.00 / basket</span>
          <div class="flex items-center space-x-1">
            <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-sm">4.9 (150)</span>
          </div>
        </div>
        <div class="flex gap-3">
          <button class="flex-1 py-3 px-4 rounded-xl bg-gradient-to-r from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 text-white font-semibold shadow-md hover:from-green-500 hover:to-green-700 dark:hover:from-green-700 dark:hover:to-green-900 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900">
            Add to Cart
          </button>
          <button class="p-3 rounded-xl bg-white/50 dark:bg-gray-700/50 border border-white/50 dark:border-gray-600/50 text-gray-700 dark:text-gray-200 hover:bg-gray-100/50 dark:hover:bg-gray-600/50 shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark: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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

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

Media Embed Component - Marketplace

A complex, responsive media embed component designed for a marketplace, featuring a Material Design aesthetic with a retro/vintage color palette and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transition-all duration-300">
    <div class="md:flex">
      <!-- Media Section -->
      <div class="md:flex-shrink-0 relative w-full md:w-2/3 lg:w-3/5 xl:w-2/3">
        <div class="aspect-w-16 aspect-h-9 relative overflow-hidden bg-gray-200 dark:bg-gray-700">
          <img class="absolute inset-0 w-full h-full object-cover" src="https://picsum.photos/1200/675?random=1" alt="Product media">
          <div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/70 to-transparent text-white flex justify-between items-end">
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
              <span class="text-sm font-medium">0:35 / 4:12</span>
            </div>
            <div class="flex items-center space-x-2">
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M11 18h2v-6h-2v6zm4 0h2v-6h-2v6zM12 4.4L2 9.4v12.2h20V9.4L12 4.4zM4 20v-8h16v8H4z"></path></svg>
              </button>
              <button class="p-2 bg-black/50 rounded-full hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-yellow-400/80 transition duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6.6-.9c.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6zM9.4 14.9c-.4.7-.1 1.6.6 2 .7.4 1.6.1 2-.6.4-.7.1-1.6-.6-2-.7-.4-1.6-.1-2 .6zm3.2-5.4c.4.7.1 1.6-.6 2-.7.4-1.6.1-2-.6-.4-.7-.1-1.6.6-2 .7-.4 1.6-.1 2 .6z"></path></svg>
              </button>
            </div>
          </div>
        </div>
        <div class="grid grid-cols-4 gap-2 p-2 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer border-2 border-yellow-500" src="https://picsum.photos/300/200?random=1" alt="Thumbnail 1">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=2" alt="Thumbnail 2">
          <img class="w-full h-20 object-cover rounded shadow-sm cursor-pointer opacity-70 hover:opacity-100" src="https://picsum.photos/300/200?random=3" alt="Thumbnail 3">
          <div class="relative w-full h-20 bg-gray-300 dark:bg-gray-600 rounded flex items-center justify-center cursor-pointer group">
            <img class="w-full h-full object-cover rounded opacity-70 group-hover:opacity-100" src="https://picsum.photos/300/200?random=4" alt="Thumbnail 4">
            <div class="absolute inset-0 bg-black/50 text-white flex items-center justify-center rounded">
              <span class="text-lg font-bold">+5</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Details Section -->
      <div class="p-6 md:p-8 md:w-1/3 lg:w-2/5 xl:w-1/3 flex flex-col justify-between">
        <div>
          <div class="uppercase tracking-wide text-sm text-amber-600 dark:text-amber-400 font-semibold mb-2">Vintage Collectible</div>
          <h1 class="block mt-1 text-2xl leading-tight font-extrabold text-gray-900 dark:text-white break-words md:text-3xl lg:text-4xl">
            Mid-Century Modern Desk Lamp
          </h1>
          <p class="mt-3 text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed">
            A rare and exquisite piece from the 1960s, a true testament to timeless design and craftsmanship, perfect for adding a touch of retro elegance to any space.
          </p>

          <div class="mt-4 flex items-baseline">
            <p class="text-4xl font-extrabold text-gray-900 dark:text-yellow-400 mr-2">$129.99</p>
            <p class="text-xl text-gray-500 dark:text-gray-400 line-through">$150.00</p>
            <span class="ml-2 text-green-600 dark:text-green-400 font-semibold text-sm">(13% off)</span>
          </div>

          <div class="mt-6">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Seller:</h3>
            <div class="flex items-center">
              <img class="h-10 w-10 rounded-full object-cover border-2 border-amber-400 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Seller Avatar">
              <div class="ml-4">
                <p class="text-lg font-medium text-gray-900 dark:text-white">RetroFinds Emporium</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">500+ sales <span class="text-amber-500">★ 4.9</span></p>
              </div>
            </div>
          </div>

          <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">Features:</h3>
            <ul class="list-disc list-inside text-gray-600 dark:text-gray-300 text-sm space-y-1">
              <li>Solid Brass Construction</li>
              <li>Adjustable Articulating Arm</li>
              <li>Original Bakelite Switch</li>
              <li>Works with E27 LED bulbs</li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
          <button class="flex-1 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-400/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M17 18a2 2 0 01-2 2A2 2 0 0113 18A2 2 0 0115 16A2 2 0 0117 18zm-7 0a2 2 0 01-2 2A2 2 0 016 18A2 2 0 018 16A2 2 0 0110 18zm10.7-15.6l-1.6 1.8c-1.1.9-2.6 1.2-4 1.1h-4.3c-.6 0-1.1.2-1.4.6l-2-2.1c-.8-.9-2.2-.9-3 0-1.2 1.3-1.4 3-1.4 4.5l.5 6.3c.1.7.7 1.2 1.4 1.2h14c.7 0 1.3-.5 1.4-1.2l.5-6.3c.1-1.5-.1-3.2-1.4-4.5z"></path></svg>
            Add to Cart
          </button>
          <button class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300/50 dark:focus:ring-gray-600/50">
            <svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
            Wishlist
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Shopping_Cart_Component

A responsive shopping cart component with a retro/vintage aesthetic, using sepia/brown tones, suitable for product showcases. Includes dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-stone-100 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-amber-100 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden border-4 border-amber-200 dark:border-stone-700 transform transition duration-500 hover:scale-[1.01]">
    <div class="p-6 sm:p-8 border-b-4 border-amber-200 dark:border-stone-700 bg-amber-200 dark:bg-stone-700">
      <h1 class="text-3xl sm:text-4xl font-bold text-amber-900 dark:text-stone-100 text-center uppercase tracking-wider font-['Press_Start_2P'] drop-shadow-lg">Your Cart</h1>
    </div>

    <div class="p-4 sm:p-6 lg:p-8 space-y-6 sm:space-y-8">
      <!-- Cart Item 1 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage1/120/120" alt="Retro Camera" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">The 'Viewfinder' Camera</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Analog aesthetics, digital reliability.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$499.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty1" class="sr-only">Quantity</label>
          <input type="number" id="qty1" value="1" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage2/120/120" alt="Old School Headphones" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">The 'Soundscape' Headphones</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Crystal clear audio, classic design.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$129.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty2" class="sr-only">Quantity</label>
          <input type="number" id="qty2" value="2" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex flex-col sm:flex-row items-center bg-amber-50 dark:bg-stone-900 p-4 rounded-lg shadow-md border-2 border-amber-200 dark:border-stone-700 relative group transition duration-300 ease-in-out transform hover:translate-y-[-2px]">
        <button class="absolute top-2 right-2 text-amber-500 hover:text-red-600 dark:text-stone-400 dark:hover:text-red-500 transition-colors duration-200" title="Remove item">
          <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="M6 18L18 6M6 6l12 12"></path></svg>
        </button>
        <img src="https://picsum.photos/seed/vintage3/120/120" alt="Vinyl Record" class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-md border-2 border-amber-300 dark:border-stone-600 shadow-sm mr-4 sm:mr-6 flex-shrink-0">
        <div class="flex-grow mt-4 sm:mt-0 text-center sm:text-left">
          <h3 class="text-xl sm:text-2xl font-semibold text-amber-800 dark:text-stone-200 mb-1">Classic Rock Vinyl</h3>
          <p class="text-amber-700 dark:text-stone-300 text-sm sm:text-base">Timeless tunes, warm analog sound.</p>
          <p class="text-lg sm:text-xl font-bold text-amber-900 dark:text-stone-100 mt-2">$24.99</p>
        </div>
        <div class="flex items-center mt-4 sm:mt-0 ml-0 sm:ml-6">
          <label for="qty3" class="sr-only">Quantity</label>
          <input type="number" id="qty3" value="1" min="1" class="w-16 p-2 text-center rounded-md bg-amber-100 dark:bg-stone-800 border-2 border-amber-300 dark:border-stone-600 text-amber-900 dark:text-stone-100 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-stone-400 font-bold">
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 border-t-4 border-amber-200 dark:border-stone-700 bg-amber-200 dark:bg-stone-700">
      <div class="flex justify-between items-center text-xl sm:text-2xl font-bold text-amber-900 dark:text-stone-100 mb-4">
        <span class="uppercase font-['Press_Start_2P']">Total:</span>
        <span class="text-3xl sm:text-4xl text-amber-950 dark:text-stone-50 drop-shadow-md">$774.96</span>
      </div>
      <div class="flex flex-col sm:flex-row justify-center gap-4">
        <button class="flex-1 py-3 px-6 bg-amber-700 hover:bg-amber-800 dark:bg-stone-700 dark:hover:bg-stone-600 text-white font-bold rounded-lg shadow-lg uppercase tracking-wider transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 border-2 border-amber-800 dark:border-stone-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-stone-500">
          Continue Shopping
        </button>
        <button class="flex-1 py-3 px-6 bg-amber-900 hover:bg-amber-950 dark:bg-stone-900 dark:hover:bg-stone-800 text-white font-bold rounded-lg shadow-lg uppercase tracking-wider transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 border-2 border-amber-950 dark:border-stone-800 focus:outline-none focus:ring-4 focus:ring-amber-400 dark:focus:ring-stone-600">
          Proceed to Checkout
        </button>
      </div>
    </div>
  </div>

  <!-- Add a specific font if you want the 'Press Start 2P' effect or remove it -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
  </style>
</div>

Activity Feed Component

A simple, responsive activity feed component with a cyberpunk-autumn aesthetic, featuring dark backgrounds, rich oranges, browns, and burgundy tones, suitable for sports/fitness applications. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-[#1a0f0f] dark:bg-[#0a0000] p-4 sm:p-6 md:p-8 font-mono text-[#f8a848] dark:text-[#f8d878]">
  <div class="max-w-xl mx-auto bg-[#2b1a1a] dark:bg-[#1a0a0a] rounded-lg shadow-lg overflow-hidden border border-[#5c3d2e] dark:border-[#3a1d1d]">
    <div class="p-4 sm:p-6 border-b border-[#5c3d2e] dark:border-[#3a1d1d] flex items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold uppercase text-[#f8a848] dark:text-[#f8d878]">
        <span class="text-[#ff6f00] dark:text-[#ff9f48]">//</span> ACTIVITY FEED
      </h2>
      <span class="text-sm text-[#8c5339] dark:text-[#b87353]">LIVE <span class="animate-pulse text-[#d62828]">•</span></span>
    </div>

    <div class="divide-y divide-[#3d2929] dark:divide-[#2a1a1a]">

      <!-- Activity Item 1 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Jake 'The Hammer' Miller</strong> completed <span class="text-[#bf4a24] dark:text-[#e07b39]">5K Run</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">15 minutes ago</p>
          <div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Distance: 5.0 km</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 23:45</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Avg Pace: 4:45/km</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 2 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Sarah 'Rocket' Lee</strong> joined the <span class="text-[#bf4a24] dark:text-[#e07b39]">'Autumn Marathon Prep' Challenge</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">1 hour ago</p>
          <div class="mt-2 text-sm text-[#f8a848] dark:text-[#f8d878]">
            <img class="w-full max-h-40 object-cover rounded-md border border-[#3d2929] dark:border-[#2a1a1a] mb-2" src="https://picsum.photos/400/250?random=1" alt="Challenge Image">
            <p class="text-xs text-[#8c5339] dark:text-[#b87353]">Challenge goal: 42.2 km in 4 weeks.</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="p-4 sm:p-6 flex items-start space-x-4">
        <img class="w-10 h-10 rounded-full object-cover border-2 border-[#ff6f00] dark:border-[#ff9f48] shadow-md" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm sm:text-base mb-1">
            <strong class="text-[#ff6f00] dark:text-[#ff9f48]">Coach Dave</strong> updated <span class="text-[#bf4a24] dark:text-[#e07b39]">Team Blaze's Next Practice</span>.
          </p>
          <p class="text-xs text-[#8c5339] dark:text-[#b87353]">3 hours ago</p>
          <div class="mt-2 bg-[#1f1212] dark:bg-[#0f0707] p-3 rounded-md border border-[#3d2929] dark:border-[#2a1a1a] text-sm text-[#f8a848] dark:text-[#f8d878] leading-tight">
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Date: 2023-11-10</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Time: 18:00 EST</p>
            <p><span class="text-[#ff6f00] dark:text-[#ff9f48]">&gt;</span> Location: City Sports Arena, Court 3</p>
          </div>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 border-t border-[#5c3d2e] dark:border-[#3a1d1d] text-center text-xs text-[#8c5339] dark:text-[#b87353]">
      <p>DATA STREAM // ENCRYPTED & SECURE</p>
    </div>
  </div>
</div>

Bauhaus Pastel Rating System Component

A responsive and functional rating system component with geometric forms and pastel colors, suitable for dashboard integration. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-700 rounded-lg shadow-xl p-6 sm:p-8 border border-gray-100 dark:border-gray-600 transition-all duration-300 ease-in-out">
    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide">Rate Our Service</h3>
    
    <div class="flex justify-center items-center gap-2 sm:gap-3 mb-8">
      <button aria-label="1 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="2 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="3 star rating" class="rating-star text-3xl sm:text-4xl text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="4 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
      <button aria-label="5 star rating" class="rating-star text-3xl sm:text-4xl text-gray-300 dark:text-gray-500 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 rounded-sm">
        &#9733;
      </button>
    </div>
    
    <div class="mb-6">
      <label for="comments" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Comments (Optional):</label>
      <textarea id="comments" rows="4" class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-2 focus:ring-blue-300 focus:border-blue-300 dark:bg-gray-800 dark:text-gray-100 resize-none transition-colors duration-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Tell us about your experience..."></textarea>
    </div>
    
    <div class="flex justify-center">
      <button type="submit" class="w-full max-w-xs py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 dark:focus:ring-blue-600 transition-colors duration-200 ease-in-out transform hover:-translate-y-0.5">
        Submit Rating
      </button>
    </div>
  </div>
</div>

Audio Player Component

A responsive audio player component with a paper/print-inspired design, cool neutral color scheme, dark mode support, and interactive features suitable for entertainment and media platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border border-gray-200 dark:border-gray-700
              transform transition-all duration-300 ease-in-out
              hover:shadow-2xl hover:-translate-y-1
              print-paper-effect relative">

    <!-- Page Curl / Fold Effect (Visual detail for paper feel) -->
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-50 dark:bg-gray-700 rounded-bl-lg opacity-75" style="clip-path: polygon(100% 0, 0 0, 100% 100%);"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-gray-100 dark:bg-gray-900 rounded-bl-lg" style="clip-path: polygon(100% 0, 70% 0, 100% 30%);"></div>

    <!-- Album Art Section -->
    <div class="relative w-full h-64 overflow-hidden rounded-t-lg border-b border-gray-200 dark:border-gray-700">
      <img src="https://picsum.photos/600/400?random=1" alt="Album Art" class="w-full h-full object-cover object-center filter grayscale-0 dark:filter-none">
      <div class="absolute inset-0 bg-gradient-to-t from-gray-900/70 via-transparent to-transparent"></div>
      <div class="absolute bottom-4 left-4 text-white p-2 rounded-md">
        <h3 class="text-xl font-bold mb-1 drop-shadow-lg">Ephemeral Echoes</h3>
        <p class="text-sm text-gray-200 drop-shadow-md">Luna & The Celestial Tides</p>
      </div>
    </div>

    <!-- Controls Section -->
    <div class="p-6 space-y-4">

      <!-- Playback Progress Bar -->
      <div class="w-full flex items-center space-x-2 text-gray-600 dark:text-gray-400">
        <span class="text-xs font-medium min-w-[30px]">0:45</span>
        <div class="flex-1 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden relative cursor-pointer">
          <div class="h-full bg-blue-500 dark:bg-blue-400 rounded-full" style="width: 30%;"></div>
          <!-- Draggable thumb (illustrative) -->
          <div class="absolute h-4 w-4 bg-white dark:bg-gray-300 rounded-full shadow border-2 border-blue-500 dark:border-blue-400 -translate-y-1/2 top-1/2 left-[30%] -ml-2"></div>
        </div>
        <span class="text-xs font-medium min-w-[30px]">3:20</span>
      </div>

      <!-- Main Playback Buttons -->
      <div class="flex items-center justify-center space-x-6 text-gray-700 dark:text-gray-300">
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Previous">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 bg-blue-500 dark:bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 transition-all duration-200" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
            <path d="M8 5v14l11-7z"/>
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200" aria-label="Next">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M6 5l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Secondary Controls -->
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 pt-4 border-t border-dashed border-gray-300 dark:border-gray-600">
        <button class="flex items-center space-x-1 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 text-sm" aria-label="Shuffle">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12V8m5.416-3a8.001 8.001 0 0115.356 2m-1.879 11H18V9m3 3L15 9m3 9l3 3"/></svg>
          <span class="hidden sm:inline">Shuffle</span>
        </button>

        <div class="flex items-center space-x-4">
          <!-- Volume Control -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Volume">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A5 5 0 0117 12h2a7 7 0 00-1.745-4.37A9.001 9.001 0 0121 12h2a11.001 11.001 0 00-2.825-6.879L18 6l-2.464-2.464zM9 6H4a1 1 0 00-1 1v10a1 1 0 001 1h5l4 4V2l-4 4z" />
            </svg>
          </button>
          <!-- Current Playback Mode (Loop/Repeat) -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="Repeat">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
            </svg>
          </button>
          <!-- More Options / Playlist -->
          <button class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200" aria-label="More Options">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>

</div>

<style>
  /* This is for the 'paper-like' effect */
  .print-paper-effect {
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Simulating a subtle texture and shadow */
  }

  /* Optional: Add a very subtle grain/texture if feasible without extra elements */
  /* For a true paper look, a background image or SVG filter would be ideal, but out of scope for pure HTML/TW */
  /* .print-paper-effect::before {
     content: '';
     position: absolute;
     top: 0; left: 0; right: 0; bottom: 0;
     background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuMDcwMiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEyOCwxMjgsMTI4LDAuMDgpIiBzdHJva2Utd2lkdGg9IjEuMjUiPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48L3BhdHRlcm4+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuMDcwMikvIj48L3N2Z2c+');
     opacity: 0.2;
     pointer-events: none;
     z-index: 0;
  } */
</style>

Brutalism_Portfolio_Columns_Component

A brutalist-inspired multi-column portfolio component with muted colors, featuring large typography, high contrast borders, and asymmetrical layouts. Includes dark mode support and showcases projects with titles, descriptions, and images.

Open Preview

                <section class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 font-mono text-gray-900 dark:text-gray-100 transition-colors duration-300">
  <div class="max-w-7xl mx-auto border-4 border-gray-900 dark:border-gray-100 p-4 lg:p-8 space-y-8 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-8">

    <!-- Left Column - Main Title & Intro -->
    <div class="lg:col-span-1 border-b-4 lg:border-b-0 lg:border-r-4 border-gray-900 dark:border-gray-100 pb-4 lg:pb-0 lg:pr-4">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl uppercase leading-none mb-4 tracking-tighter text-gray-900 dark:text-gray-100">
        <span class="block">My</span>
        <span class="block text-red-700 dark:text-red-300">Work</span>
        <span class="block">Showcase</span>
      </h1>
      <p class="text-lg md:text-xl leading-snug tracking-tight max-w-sm mb-4">
        A raw collection of creations, defying norms and embracing the unexpected.
      </p>
      <div class="flex space-x-2">
        <button class="px-4 py-2 border-2 border-gray-900 dark:border-gray-100 bg-gray-900 text-gray-100 dark:bg-gray-100 dark:text-gray-900 uppercase text-sm font-bold hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors duration-200">
          See All
        </button>
        <button class="px-4 py-2 border-2 text-gray-900 dark:text-gray-100 border-gray-900 dark:border-gray-100 uppercase text-sm font-bold hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-200">
          About Me
        </button>
      </div>
    </div>

    <!-- Right Columns - Projects -->
    <div class="lg:col-span-2 space-y-8">
      
      <!-- Project 1 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj1/600/400" alt="Project 1 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">The Grid Disjunction</h2>
          <p class="text-base leading-snug">
            An experimental web interface exploring fragmented layouts and stark contrasts. Built with raw HTML and CSS. 
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">UI/UX</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Web Design</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Brutalism</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-b-4 border-gray-900 dark:border-gray-100 pb-8">
        <div class="md:col-span-1 order-2 md:order-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Echoes of Form</h2>
          <p class="text-base leading-snug">
            A series of digital art pieces focusing on deconstructed shapes and desaturated palettes.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Generative Art</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Digital Painting</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
        <div class="md:col-span-1 order-1 md:order-2">
          <img src="https://picsum.photos/seed/brutalim_proj2/600/400" alt="Project 2 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
      </div>

      <!-- Project 3 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="md:col-span-1">
          <img src="https://picsum.photos/seed/brutalim_proj3/600/400" alt="Project 3 Image" class="w-full h-auto object-cover border-4 border-gray-900 dark:border-gray-100 mb-4">
        </div>
        <div class="md:col-span-1 space-y-2">
          <h2 class="text-3xl lg:text-4xl uppercase leading-none tracking-tighter text-blue-700 dark:text-blue-300 mb-2">Concrete Dreams</h2>
          <p class="text-base leading-snug">
            Architectural visualizations with harsh lighting and exposed structures.
          </p>
          <ul class="flex flex-wrap text-sm gap-2 mt-4">
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">3D Modeling</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Rendering</li>
            <li class="px-2 py-1 border border-gray-900 dark:border-gray-100">Architecture</li>
          </ul>
          <a href="#" class="inline-block mt-4 text-gray-900 dark:text-gray-100 underline text-sm uppercase font-bold hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200">View Project &rarr;</a>
        </div>
      </div>

    </div>

  </div>
</section>

Playful_Finance_Loader

A playful and simple loader component for finance/banking interfaces, featuring cool neutrals and rounded elements. Fully responsive with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 transition-colors duration-300">
    <div class="flex flex-col items-center justify-center space-y-6">
      <div class="relative w-24 h-24">
        <!-- Outer ring -->
        <div class="absolute inset-0 rounded-full border-4 border-dashed border-gray-200 dark:border-gray-700 animate-spin-slow opacity-75"></div>
        <!-- Inner spinning circles -->
        <div class="absolute inset-4 rounded-full border-4 border-solid border-blue-300 dark:border-blue-500 animate-spin opacity-90"></div>
        <div class="absolute inset-4 rounded-full border-4 border-solid border-gray-400 dark:border-gray-600 animate-spin-reverse opacity-80"></div>
        <!-- Center icon/text -->
        <div class="absolute inset-0 flex items-center justify-center">
          <svg class="w-12 h-12 text-blue-400 dark:text-blue-300" 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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M.636 12l.707-.707M12 21v-1m-6.364-1.636l.707-.707M3 12H2m1-.707l-.707-.707m0 0a2 2 0 112.828 2.828l-2.828-2.828zM12 12a3 3 0 100-6 3 3 0 000 6z"></path>
          </svg>
        </div>
      </div>

      <h2 class="text-xl sm:text-2xl font-semibold text-gray-700 dark:text-gray-200 text-center">
        Processing Transaction...
      </h2>
      <p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 text-center max-w-xs">
        Please wait while we securely process your request. This may take a few moments.
      </p>

      <div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-2.5 sm:h-3 overflow-hidden mt-4 shadow-inner">
        <div class="bg-blue-400 dark:bg-blue-600 h-full rounded-full transition-all duration-1000 ease-in-out" style="width: 75%;">
        </div>
      </div>
    </div>
  </div>

  <style>
    @keyframes spin-slow {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes spin-reverse {
      from { transform: rotate(0deg); }
      to { transform: rotate(-360deg); }
    }
    .animate-spin-slow {
      animation: spin-slow 3s linear infinite;
    }
    .animate-spin-reverse {
      animation: spin-reverse 1.5s linear infinite;
    }
  </style>
</div>

Password Reset Component

A minimalist, responsive password reset component with sunset/warm tones, suitable for food/restaurant websites, including dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-orange-50 to-red-100 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-700 rounded-lg shadow-xl p-8 space-y-6 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center">
      <h2 class="mt-2 text-3xl font-extrabold text-orange-600 dark:text-orange-400 capitalize drop-shadow-sm">Reset Your Password</h2>
      <p class="mt-2 text-sm text-gray-500 dark:text-gray-300">Enter your email address to receive a password reset link.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email address</label>
        <div class="mt-1">
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-transparent focus:border-orange-500 dark:focus:border-orange-400 sm:text-sm bg-gray-50 dark:bg-gray-600 text-gray-900 dark:text-white transition-colors duration-200 ease-in-out">
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-700 dark:focus:ring-orange-500 transition-colors duration-200 ease-in-out transform hover:scale-105 active:scale-95">
          Send Reset Link
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm">
        <a href="#" class="font-medium text-orange-600 hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
          Remembered your password? Log In
        </a>
      </p>
    </div>
  </div>
</div>

RetroRealEstateBreadcrumb

A simple, responsive breadcrumb navigation component in a retro/vintage style with autumn colors, suitable for real estate property listings, including dark mode support.

Open Preview

                <nav class="flex justify-center py-4 px-2 sm:px-4 text-sm md:text-base bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-800" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 sm:space-x-4">
    <li class="inline-flex items-center">
      <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
        <svg class="w-4 h-4 mr-1 sm:mr-2 text-orange-700 dark:text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
        </svg>
        Home
      </a>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Properties
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <a href="#" class="text-orange-800 hover:text-orange-900 dark:text-orange-400 dark:hover:text-orange-300 font-serif tracking-wide transition-colors duration-200">
          Houses
        </a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <span class="text-orange-700 dark:text-orange-500 mr-1 sm:mr-2">/</span>
        <span class="text-stone-600 dark:text-stone-400 font-light font-serif tracking-wide pr-1 sm:pr-0">
          123 Vintage Lane
        </span>
      </div>
    </li>
  </ol>
</nav>

1 ... 75 76 77 78 79 ... 335

Search Components

Categories

All Components