Search Components

All Components

Browse all available Tailwind CSS components

Product Gallery Component

A complex, paper/print-inspired product gallery component with complementary colors, designed for content consumption like a blog, featuring rich details, responsiveness, and dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12">

  <!-- Component Wrapper -->
  <div class="max-w-7xl mx-auto py-8 lg:py-16">

    <!-- Header Section -->
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl font-extrabold text-blue-800 dark:text-orange-300 tracking-tight leading-tight mb-4 filter drop-shadow animate-fade-in-down">
        Featured Collection
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto leading-relaxed animate-fade-in-up">
        Discover our handcrafted selections, inspired by timeless artistry and sustainable practices.
      </p>
    </div>

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

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1018/600/400" alt="Vintage Typewriter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">New Arrival</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Whispering Keys" Typewriter</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A beautifully restored vintage typewriter, perfect for the wordsmith in your life. Each click tells a story.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$450.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.8 (120 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1025/600/400" alt="Leather-bound Journal" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Eco-Friendly</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Explorer's" Leather Journal</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Hand-stitched leather journal with acid-free paper, perfect for thoughts, sketches, and adventures.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$85.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (230 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-up">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1033/600/400" alt="Artisan Ceramic Mug" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Limited Edition</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Morning Dew" Ceramic Mug</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Artisan-crafted ceramic mug, unique glaze, perfect for your morning brew or a cozy evening tea.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$45.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.7 (88 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 4 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-fade-in-down">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1040/600/400" alt="Vintage Fountain Pen" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Bestseller</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Inkwell" Fountain Pen</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Elegantly crafted fountain pen, a joy to write with, perfect for calligraphy enthusiasts and professionals.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$120.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (310 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 5 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-left">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1044/600/400" alt="Wooden Desk Organizer" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-yellow-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Handmade</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Artisan" Desk Organizer</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">Solid oak desk organizer to declutter your workspace with natural elegance.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$95.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.6 (95 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

      <!-- Product Card 6 -->
      <article class="bg-white dark:bg-gray-850 rounded-lg shadow-xl shadow-gray-200/50 dark:shadow-black/30 overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl hover:shadow-gray-300/60 dark:hover:shadow-black/50 border border-gray-200 dark:border-gray-700 animate-slide-in-right">
        <div class="relative pb-[75%] overflow-hidden">
          <img src="https://picsum.photos/id/1054/600/400" alt="Vintage Camera" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 hover:scale-105">
          <span class="absolute top-3 left-3 bg-teal-600 text-white text-xs font-semibold px-2 py-1 rounded-full shadow-md">Collector's Item</span>
        </div>
        <div class="p-6">
          <h3 class="text-xl font-bold text-blue-900 dark:text-orange-200 mb-2 leading-tight">"Timeless Lens" Vintage Camera</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed line-clamp-3">A classic film camera, meticulously restored, ready to capture new memories with old charm.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$720.00</span>
            <div class="flex items-center">
              <span class="text-yellow-500 mr-1">&starf;</span>
              <span class="text-gray-600 dark:text-gray-400 text-sm">4.9 (75 reviews)</span>
            </div>
          </div>
          <a href="#" class="block w-full text-center bg-blue-700 hover:bg-blue-800 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 shadow-md transform hover:translate-y-0.5">
            View Details
          </a>
        </div>
      </article>

    </div>

    <!-- Pagination/Load More (Optional) -->
    <div class="mt-12 text-center">
      <button class="px-8 py-4 bg-blue-600 hover:bg-blue-700 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-orange-800">
        Load More Products
      </button>
    </div>

    <!-- Testimonial/Quote Section (to enhance blog/content feel) -->
    <div class="mt-20 border-t border-gray-300 dark:border-gray-700 pt-16">
      <figure class="max-w-3xl mx-auto bg-blue-50 dark:bg-gray-800 p-8 rounded-lg shadow-inner-xl shadow-gray-200/50 dark:shadow-black/20 text-center relative overflow-hidden">
        <blockquote class="text-xl md:text-2xl italic text-gray-800 dark:text-gray-200 leading-relaxed mb-6 relative z-10">
          "Every item tells a story, a testament to craftsmanship and passion. Our home feels more authentic with these timeless pieces."
        </blockquote>
        <figcaption class="flex items-center justify-center space-x-4 relative z-10">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-blue-400 shadow-md">
          <div>
            <cite class="block text-lg font-semibold text-orange-700 dark:text-blue-300 not-italic">Eleanor Vance</cite>
            <span class="block text-gray-600 dark:text-gray-400 text-sm">Satisfied Customer</span>
          </div>
        </figcaption>
        <span class="absolute -bottom-10 -right-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">“</span>
        <span class="absolute -top-10 -left-10 text-9xl font-serif text-blue-100 dark:text-gray-700 opacity-50 select-none">”</span>
      </figure>
    </div>

  </div>

</div>

<!-- Just for demonstration purposes - Custom Styles for animations and pseudo-elements -->
<style>
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes fadeInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
  .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
  .animate-slide-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
  .animate-slide-in-right { animation: fadeInRight 0.8s ease-out forwards; }

  /* Stagger animations for better effect */
  .grid article:nth-child(1) { animation-delay: 0.1s; }
  .grid article:nth-child(2) { animation-delay: 0.2s; }
  .grid article:nth-child(3) { animation-delay: 0.3s; }
  .grid article:nth-child(4) { animation-delay: 0.4s; }
  .grid article:nth-child(5) { animation-delay: 0.5s; }
  .grid article:nth-child(6) { animation-delay: 0.6s; }

  /* Dark mode specific for testing purposes if not applying to whole page */
  /* Use 'dark' class on parent element (e.g., html or body) for actual dark mode activation */
  /* .dark .bg-gray-100 { background-color: rgb(17 24 39); } */
  /* .dark .text-gray-900 { color: rgb(229 231 235); } */
  .dark .bg-gray-850 { background-color: #2a2a2a; /* Slightly lighter than gray-900 for paper texture */ }

  /* Pseudo-elements for paper texture (optional, mostly visual flair) */
  .bg-white::before,
  .bg-white::after,
  .dark\:bg-gray-850::before,
  .dark\:bg-gray-850::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0; /* Behind content but above background */
  }
  
  .bg-white::before {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  .dark\:bg-gray-850::after {
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M0 0h3v3H0V0zm3 3h3v3H3V3z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
  }

  /* Shadow for paper-like elements */
  .shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05), inset 0 4px 6px 0 rgba(0, 0, 0, 0.03);
  }
   .dark\:shadow-inner-xl {
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3), inset 0 4px 6px 0 rgba(0, 0, 0, 0.2);
  }

</style>

A complex, responsive alert messages component designed with Material Design principles, using ocean/blue tones, suitable for non-profit/charity websites. Includes multiple alert types, dismiss functionality, and dark mode support.

Open Preview

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

  <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-300 mb-8 text-center">Alert Messages</h2>

  <!-- Success Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-blue-50 dark:bg-blue-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-blue-200 dark:border-blue-800">
      <div class="flex-shrink-0 text-blue-600 dark:text-blue-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-800 dark:text-blue-200">Donation Successful!</h3>
        <p class="text-sm sm:text-base text-blue-700 dark:text-blue-300 mt-1">Thank you for your generous contribution. Your support helps us provide clean water to communities in need.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-blue-600 dark:text-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-blue-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Info Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-indigo-50 dark:bg-indigo-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-indigo-200 dark:border-indigo-800">
      <div class="flex-shrink-0 text-indigo-600 dark:text-indigo-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-indigo-800 dark:text-indigo-200">Event Reminder</h3>
        <p class="text-sm sm:text-base text-indigo-700 dark:text-indigo-300 mt-1">Join us for our annual Charity Gala on November 15th! Purchase your tickets now to support education programs.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-indigo-700 dark:text-indigo-300 bg-white dark:bg-transparent border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-indigo-900 transition-colors duration-200 shadow-sm">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 hidden sm:block">
        <img src="https://picsum.photos/id/1084/100/100" alt="Event image" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover shadow-sm">
      </div>
    </div>
  </div>

  <!-- Warning Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-orange-50 dark:bg-orange-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-orange-200 dark:border-orange-800">
      <div class="flex-shrink-0 text-orange-600 dark:text-orange-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-800 dark:text-orange-200">Urgent Action Required!</h3>
        <p class="text-sm sm:text-base text-orange-700 dark:text-orange-300 mt-1">Our emergency food drive ends in 48 hours. Please consider donating non-perishable items to help local families.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-orange-600 dark:text-orange-400 hover:bg-orange-200 dark:hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-orange-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Error Alert -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex items-center p-4 rounded-lg bg-red-50 dark:bg-red-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-red-200 dark:border-red-800">
      <div class="flex-shrink-0 text-red-600 dark:text-red-400">
        <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
      </div>
      <div class="ml-4 flex-1">
        <h3 class="text-lg sm:text-xl font-semibold text-red-800 dark:text-red-200">Payment Processing Error</h3>
        <p class="text-sm sm:text-base text-red-700 dark:text-red-300 mt-1">Oops! There was an issue processing your last donation. Please check your payment details or try again later.</p>
      </div>
      <div class="ml-auto pl-4">
        <button type="button" class="flex-shrink-0 p-2 rounded-full text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-red-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Interactive Success Alert with Avatar -->
  <div class="max-w-4xl mx-auto mb-6 transition-all duration-300 ease-in-out" role="alert">
    <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-lg bg-emerald-50 dark:bg-emerald-950 shadow-md transform hover:scale-[1.01] hover:shadow-lg transition-all duration-300 ease-in-out border border-emerald-200 dark:border-emerald-800">
      <div class="flex-shrink-0 flex justify-center items-center h-full text-emerald-600 dark:text-emerald-400 mb-4 sm:mb-0 sm:mr-4">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Supporter Avatar" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full object-cover shadow-sm border-2 border-emerald-300 dark:border-emerald-700">
      </div>
      <div class="flex-1 text-center sm:text-left">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-800 dark:text-emerald-200">Thank you, Sarah J.!</h3>
        <p class="text-sm sm:text-base text-emerald-700 dark:text-emerald-300 mt-1">Your recent contribution of $100 has been successfully received. We are incredibly grateful for your continued support.</p>
        <div class="mt-3 flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:justify-start">
          <a href="#" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-white bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            View Impact
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-4a1 1 0 01-1.414-1.414L8.586 10l-1.293-1.293a1 1 0 111.414-1.414L10 8.586l1.293-1.293a1 1 0 111.414 1.414L11.414 10l1.293 1.293a1 1 0 01-1.414 1.414L10 11.414l-1.293 1.293a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </a>
          <button type="button" class="inline-flex items-center px-4 py-2 text-sm sm:text-base font-medium rounded-full text-emerald-700 dark:text-emerald-300 bg-white dark:bg-transparent border border-emerald-300 dark:border-emerald-700 hover:bg-emerald-100 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200 shadow-sm">
            Share on Social
          </button>
        </div>
      </div>
      <div class="ml-auto pl-4 self-start hidden sm:block">
         <button type="button" class="flex-shrink-0 p-2 rounded-full text-emerald-600 dark:text-emerald-400 hover:bg-emerald-200 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-emerald-900 transition-colors duration-200">
          <span class="sr-only">Dismiss Alert</span>
          <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
      </div>
    </div>
  </div>

</div>

Cyberpunk Chart Component - Government/Public

A moderately complex chart component with cyberpunk aesthetics, suitable for government and public service websites. Features a dark background, bright neon accents, and a retro/vintage color palette. Responsive and includes dark mode support.

Open Preview

                <div class="font-mono text-gray-800 bg-gray-100 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto bg-gradient-to-br from-purple-900 to-indigo-900 dark:from-gray-950 dark:to-black rounded-lg shadow-xl overflow-hidden border-2 border-purple-700 dark:border-teal-400 transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
    <div class="p-6 sm:p-8 lg:p-10 border-b-2 border-purple-600 dark:border-teal-500 flex flex-col sm:flex-row justify-between items-start sm:items-center">
      <div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-300 tracking-wider mb-2 drop-shadow-[0_0_5px_rgba(252,211,77,0.7)] dark:text-teal-400 dark:drop-shadow-[0_0_5px_rgba(45,212,191,0.7)]">Public Service Metrics</h2>
        <p class="text-purple-300 dark:text-gray-400 text-sm sm:text-base">Real-time data visualization for key public indicators.</p>
      </div>
      <div class="mt-4 sm:mt-0 flex gap-2">
        <button class="px-4 py-2 bg-purple-500 hover:bg-purple-600 text-white dark:bg-teal-600 dark:hover:bg-teal-700 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105 shadow-md border-2 border-purple-400 dark:border-teal-500">View Details</button>
        <button class="px-4 py-2 bg-transparent border-2 border-yellow-300 text-yellow-300 hover:bg-yellow-300 hover:text-purple-900 dark:border-teal-400 dark:text-teal-400 dark:hover:bg-teal-400 dark:hover:text-gray-900 rounded-md text-sm font-semibold transition-colors duration-200 transform hover:scale-105">Export Data</button>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 sm:p-8 lg:p-10">

      <!-- Chart 1: Bar Chart Placeholder -->
      <div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Citizen Engagement Index</h3>
        <div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md flex items-end overflow-hidden border border-purple-600 dark:border-teal-500">
          <div class="w-1/5 bg-yellow-400 h-3/4 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">75%</span></div>
          <div class="w-1/5 bg-yellow-400 h-2/3 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">68%</span></div>
          <div class="w-1/5 bg-yellow-400 h-4/5 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">82%</span></div>
          <div class="w-1/5 bg-yellow-400 h-1/2 rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">50%</span></div>
          <div class="w-1/5 bg-yellow-400 h-full rounded-t-sm mx-1 shadow-neon dark:bg-teal-300 flex items-center justify-center"><span class="text-xs text-purple-900 font-bold dark:text-gray-900">90%</span></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
          <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Avg</span>
        </div>
      </div>

      <!-- Chart 2: Line Chart Placeholder with Data Points -->
      <div class="bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg transform hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Service Request Trend</h3>
        <div class="h-48 sm:h-64 bg-purple-700 dark:bg-gray-700 rounded-md relative border border-purple-600 dark:border-teal-500">
          <!-- Grid lines -->
          <div class="absolute inset-0 grid grid-rows-4 grid-cols-6 opacity-30 text-purple-400 dark:text-gray-500">
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full border-b border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="col-span-full"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full border-r border-dashed border-purple-600 dark:border-gray-600"></div>
            <div class="row-span-full"></div>
          </div>
          <!-- Line path placeholders -->
          <svg class="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <defs>
              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#FCD34D" />
                <stop offset="100%" stop-color="#8B5CF6" />
              </linearGradient>
              <linearGradient id="gradient1_dark" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#2DD4BF" />
                <stop offset="100%" stop-color="#6EE7B7" />
              </linearGradient>
            </defs>
            <polyline 
              points="0,80 20,40 40,60 60,30 80,50 100,20" 
              fill="none" 
              stroke="url(#gradient1)" 
              stroke-width="2" 
              class="dark:stroke-[url(#gradient1_dark)]"/>
            <!-- Data Points -->
            <circle cx="0" cy="80" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="20" cy="40" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="40" cy="60" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="60" cy="30" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="80" cy="50" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
            <circle cx="100" cy="20" r="2" fill="#FCD34D" class="dark:fill-teal-300"/>
          </svg>
        </div>
        <div class="flex justify-between text-xs mt-2 text-purple-300 dark:text-gray-400">
          <span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</span>
        </div>
      </div>

      <!-- Key Performance Indicators -->
      <div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Key Indicators</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Average Response Time</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">2h 15m</p>
            </div>
            <span class="text-green-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg> Good</span>
          </div>
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Citizen Satisfaction Avg</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">4.7 <span class="text-base font-normal">/ 5</span></p>
            </div>
            <span class="text-yellow-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M12 5l7 7-7 7" />
            </svg> Stable</span>
          </div>
          <div class="bg-purple-700 dark:bg-gray-700 p-4 rounded-md flex items-center justify-between border border-purple-600 dark:border-teal-500">
            <div>
              <p class="text-purple-300 text-sm dark:text-gray-400">Active Users Monthly</p>
              <p class="text-2xl font-bold text-yellow-300 dark:text-teal-400">1.2M+</p>
            </div>
            <span class="text-sky-400 text-lg"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg> Growing</span>
          </div>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="md:col-span-2 bg-purple-800 dark:bg-gray-800 rounded-lg p-6 border-2 border-purple-700 dark:border-teal-400 shadow-lg">
        <h3 class="text-xl font-semibold text-yellow-200 mb-4 dark:text-teal-300">Recent System Activities</h3>
        <ul class="space-y-4">
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">System Admin</strong> updated 'Service Outage Protocol'. <span class="text-purple-400 dark:text-gray-500 text-xs">5 mins ago</span></p>
            </div>
          </li>
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Data Analyst</strong> generated 'Q2 Performance Report'. <span class="text-purple-400 dark:text-gray-500 text-xs">1 hour ago</span></p>
            </div>
          </li>
          <li class="flex items-start bg-purple-700 dark:bg-gray-700 p-3 rounded-md border border-purple-600 dark:border-teal-500">
            <img src="https://randomuser.me/api/portraits/men/18.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-yellow-300 dark:border-teal-400">
            <div>
              <p class="text-purple-200 dark:text-gray-300 text-sm"><strong class="text-yellow-300 dark:text-teal-400">Network Security</strong> detected 'Unusual Login Attempt'. <span class="text-red-400 dark:text-red-300 text-xs">3 hours ago</span></p>
            </div>
          </li>
        </ul>
      </div>

    </div>

    <div class="p-6 sm:p-8 lg:p-10 border-t-2 border-purple-600 dark:border-teal-500 text-center text-purple-400 dark:text-gray-500 text-xs sm:text-sm">
      &copy; 2077 Public Data Systems. All rights reserved. Data refreshed every 30 seconds.
    </div>
  </div>
  <style>
    .shadow-neon {
      box-shadow: 0 0 5px rgba(252, 211, 77, 0.7), 0 0 10px rgba(252, 211, 77, 0.4), 0 0 15px rgba(252, 211, 77, 0.2);
    }
    .dark .shadow-neon {
      box-shadow: 0 0 5px rgba(45, 212, 191, 0.7), 0 0 10px rgba(45, 212, 191, 0.4), 0 0 15px rgba(45, 212, 191, 0.2);
    }
    /* Custom placeholder for bar chart values to be readable on bars */
    .w-1\/5 span {
        font-size: 0.75rem; /* 12px */
        transform: translateY(-0.75rem); /* Adjust position if needed */
        position: relative;
        width: 100%;
        text-align: center;
    }
  </style>
</div>

Art Deco Geometric Marketplace Product Card

A product card component for a multi-vendor marketplace, styled with Art Deco geometric patterns and a gradient rainbow color scheme. Features include responsive design, dark mode support, and interactive elements.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-950 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl rounded-2xl overflow-hidden shadow-xl dark:shadow-2xl border-4 border-transparent bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-800 dark:to-red-800 p-1.5 transform transition-transform duration-500 hover:scale-[1.01] animate-gradient-border">
    <div class="bg-white dark:bg-gray-800 rounded-xl relative p-4 sm:p-6 lg:p-8 flex flex-col h-full">

      <!-- Seller Info & Art Deco Border -->
      <div class="absolute inset-0 border-8 border-transparent pointer-events-none rounded-xl">
        <div class="absolute top-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-l-4 rounded-tl-xl border-indigo-600 dark:border-indigo-400"></div>
        <div class="absolute top-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-t-4 border-r-4 rounded-tr-xl border-purple-600 dark:border-purple-400"></div>
        <div class="absolute bottom-0 left-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-l-4 rounded-bl-xl border-pink-600 dark:border-pink-400"></div>
        <div class="absolute bottom-0 right-0 w-8 h-8 lg:w-12 lg:h-12 border-b-4 border-r-4 rounded-br-xl border-red-600 dark:border-red-400"></div>
      </div>

      <div class="flex items-center mb-4 sm:mb-5 lg:mb-6 z-10">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-400 dark:ring-purple-600 mr-3" src="https://randomuser.me/api/portraits/men/52.jpg" alt="Seller Avatar">
        <div>
          <p class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-100">Artisan Emporium</p>
          <p class="text-xs text-gray-500 dark:text-gray-400">Verified Seller</p>
        </div>
      </div>

      <!-- Product Image -->
      <div class="w-full aspect-w-16 aspect-h-9 relative mb-4 sm:mb-5 lg:mb-6 rounded-lg overflow-hidden border-2 border-gray-200 dark:border-gray-700 shadow-sm">
        <img src="https://picsum.photos/id/111/600/400" alt="Product Image" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
        <span class="absolute top-2 right-2 bg-gradient-to-br from-indigo-500 to-purple-500 text-white text-xs px-2.5 py-1 rounded-full font-bold shadow-md">NEW</span>
      </div>

      <!-- Product Details -->
      <h3 class="text-xl sm:text-2xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 leading-tight gradient-text-effect">
        Geometric Abstract Pendant
      </h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 line-clamp-2 mb-4 sm:mb-5 lg:mb-6">
        Handcrafted Art Deco inspired pendant with intricate geometric patterns, perfect for adding a touch of vintage elegance.
      </p>

      <div class="flex items-center justify-between mb-4 sm:mb-5 lg:mb-6">
        <div class="flex items-baseline">
          <span class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mr-2">$129.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$149.99</span>
        </div>
        <div class="flex items-center text-yellow-500 dark:text-yellow-400 text-sm sm:text-base">
          <svg class="w-4 h-4 sm:w-5 sm:h-5 mr-1" 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.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.729c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
          </svg>
          <span>4.8</span>
          <span class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm ml-1">(128)</span>
        </div>
      </div>

      <!-- Call to Action Buttons -->
      <div class="mt-auto grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 border-transparent rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       bg-gradient-to-r from-teal-500 to-cyan-500 text-white shadow-lg 
                       hover:scale-[1.02] hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3.056-6.112A1 1 0 0019 3H4.32L4 1H3zM6 16a2 2 0 11-4 0 2 2 0 014 0zM16 16a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          Add to Cart
        </button>
        <button class="flex items-center justify-center px-4 py-2 sm:py-3 border-2 rounded-lg font-bold text-base sm:text-lg transition-all duration-300 ease-in-out
                       border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-400 dark:text-fuchsia-400 
                       hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 
                       hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-800">
          <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.586l1.172-1.172a4 4 0 115.656 5.656L10 17.656l-6.828-6.828a4 4 0 010-5.656z" clip-rule="evenodd"></path>
          </svg>
          Wishlist
        </button>
      </div>

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

<style>
  @keyframes gradient-border-animation {
    0% { border-color: #a78bfa; }
    25% { border-color: #f472b6; }
    50% { border-color: #ef4444; }
    75% { border-color: #f97316; }
    100% { border-color: #a78bfa; }
  }
  .animate-gradient-border {
    animation: gradient-border-animation 6s ease-in-out infinite alternate;
  }

  .gradient-text-effect {
    background-image: linear-gradient(to right, #6366f1, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradientText 3s ease infinite;
  }

  .dark .gradient-text-effect {
    background-image: linear-gradient(to right, #818cf8, #c084fc, #f472b6);
  }

  @keyframes gradientText {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
  }
</style>

NeonGlowPagination

A responsive pagination component with neon/glow effects, using a forest/green color palette suitable for cryptocurrency and blockchain applications. Features dark mode support and semantic HTML.

Open Preview

                <nav class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 font-sans" aria-label="Pagination">
  <ul class="flex list-none p-0 m-0">
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-3 py-2 mr-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></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.79 5.23a.75.75 0 010 1.06L9.56 10l3.23 3.71a.75.75 0 11-1.06 1.06l-3.75-3.75a.75.75 0 010-1.06l3.75-3.75a.75.75 0 011.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li>
      <a href="#" aria-current="page" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-semibold
        text-white bg-emerald-600 dark:bg-emerald-700 border border-emerald-600 dark:border-emerald-700 rounded-lg shadow-md
        ring-2 ring-emerald-500 ring-offset-1 ring-offset-transparent dark:ring-offset-transparent
        glow-emerald
        transition-all duration-300 ease-in-out
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-400 dark:bg-emerald-500 opacity-20 blur-md animate-pulse"></span>
        <span class="relative z-10">1</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">2</span>
      </a>
    </li>
    <li class="hidden sm:block">
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">3</span>
      </a>
    </li>
    <li class="hidden md:block">
      <span class="px-4 py-2 mx-1 text-sm font-medium text-gray-500Dark:text-gray-400">...</span>
    </li>
    <li class="hidden md:block">
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">9</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-4 py-2 mx-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></span>
        <span class="relative z-10">10</span>
      </a>
    </li>
    <li>
      <a href="#" class="relative inline-flex items-center justify-center px-3 py-2 ml-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm
        hover:bg-gray-50 dark:hover:bg-gray-700
        focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
        transition-all duration-300 ease-in-out
        group
        overflow-hidden">
        <span class="absolute inset-0 bg-emerald-500 dark:bg-emerald-600 opacity-0 group-hover:opacity-10 dark:group-hover:opacity-15 blur-sm transition-opacity duration-300"></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.21 14.77a.75.75 0 010-1.06L10.44 10 7.21 6.29a.75.75 0 111.06-1.06l3.75 3.75a.75.75 0 010 1.06l-3.75 3.75a.75.75 0 01-1.06 0z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

<style>
  /* This is a simple pseudo-element glow. For a more advanced glow, consider using multiple box-shadows with different opacities and offsets, or SVG filters. */
  .glow-emerald {
    position: relative;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.5), /* emerald-500 */
                0 0 10px rgba(16, 185, 129, 0.4),
                0 0 15px rgba(16, 185, 129, 0.3);
  }
  .dark .glow-emerald {
    box-shadow: 0 0 5px rgba(5, 150, 105, 0.6), /* emerald-600 */
                0 0 10px rgba(5, 150, 105, 0.5),
                0 0 15px rgba(5, 150, 105, 0.4);
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 0.2;
    }
    50% {
      opacity: 0.4;
    }
  }

  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Social Share Buttons Component

A set of social media share buttons designed with a monospace/developer aesthetic, corporate blue color scheme, and full responsiveness. Includes dark mode support.

Open Preview

                <div class="font-['Menlo',_monospace] bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-2xl mx-auto rounded-lg shadow-xl overflow-hidden border border-blue-200 dark:border-blue-800 bg-white dark:bg-gray-800">
    <div class="p-6 border-b border-blue-100 dark:border-blue-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2 leading-tight">
        <span class="text-blue-600 dark:text-blue-400">//</span> Share this article
      </h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base">Spread the word about our latest insights and news.</p>
    </div>
    <div class="p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M8.29 20.44c-1.39 0-2.5-1.12-2.5-2.5s1.11-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.11 2.5-2.5 2.5zm11.71-8.56c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zm-4.75-.41c-2.32 0-4.22 1.84-4.25 4.16.89-.96 2.11-1.5 3.39-1.5 1.28 0 2.5.54 3.39 1.51-.03-2.32-1.93-4.17-4.25-4.17zm1.75-6c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zm-9.5 0c-1.63 0-2.95 1.32-2.95 2.95s1.32 2.95 2.95 2.95 2.95-1.32 2.95-2.95-1.32-2.95-2.95-2.95zM12 0C5.37 0 0 5.37 0 12s5.37 12 12 12 12-5.37 12-12S18.63 0 12 0z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Twitter</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12a10.001 10.001 0 008.883 9.957v-7.042h-2.35V12h2.35V9.42c0-2.324 1.416-3.593 3.49-3.593 1.002 0 1.868.075 2.12.108v2.441l-1.448.001c-1.132 0-1.353.538-1.353 1.326V12h2.7v2.915h-2.7V22C17.523 22 22 17.523 22 12S17.523 2 12 2z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Facebook</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
          <path fill-rule="evenodd" d="M9.208 2.047a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zm5.5-16.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm.5 16.5a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25zM12 4a8 8 0 100 16 8 8 0 000-16zM3 12a9 9 0 119 9A9.004 9.004 0 013 12zm2 0a7 7 0 1014 0 7 7 0 00-14 0zm10.5-5.5a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm5.5 11a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25zm-5.5 0a.5.5 0 00-.5.5v1.25a.5.5 0 00.5.5h1.25a.5.5 0 00.5-.5v-1.25a.5.5 0 00-.5-.5h-1.25z" clip-rule="evenodd"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Instagram</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.564-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">LinkedIn</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 3.5c-4.99 0-9.04 4.05-9.04 9.04 0 4.98 4.05 9.04 9.04 9.04 4.98 0 9.04-4.06 9.04-9.04C21.08 7.55 17.03 3.5 12.04 3.5zM15.42 16.5c-.32.06-.5-.17-.6-.24l-2.07-1.42c-.22-.15-.43-.3-.43-.65V8.5h.01c.28 0 .42-.14.42-.42 0-.29-.14-.42-.42-.42-.29 0-.42.14-.42.42v5.77c0 .12.04.23.08.31.05.07.13.1.28.21.14.09.28.18.42.26l2.1 1.44c.48.33.67.55.51.9-.19.4-.55.52-.92.42zm-3.38-2.61c.42-.29.54-.78.29-1.2l-2.82-4.9c-.29-.5-.88-.65-1.39-.36-.5.29-.65.88-.36 1.39l2.82 4.9c.29.5.88.65 1.39.36z"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Email</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M19.9 22.4L20 22.5c.3.3.4.7.4 1.1s-.1.8-.4 1.1L20 25c-.2.2-.4.4-.7.4s-.5.0-.7-.1c0 0-.1-.1-.1-.1-.1-.1-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.2-.3-.1-.1-.1-.2-.1-.2s-.1-.2-.1-.3c-.1-.1-.1-.2-.1-.3s-.1-.2-.1-.3c0-.1-.1-.2-.1-.2s0-.2-.1-.3c0 0-.1.0-.1.0-.1 0-.1.0-.1-.1-.1-.1-.1-.1 0-.1s.1-.1.2-.1c0-.1.1-.1.2-.1.1-.1.1-.1.2-.1s.1-.1.2-.1h.2c0 0-.1 0-.1.1-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.2-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1.1-.1.1-.2.1-.1-.1-.1-.2-.2-.2-.1-.1-.1-.1-.2-.1h-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.2-.1s.1-.1.2-.1c.1 0 .1-.1.2-.1h.2c.1-.1.2-.1.3-.1.1-.1.1-.1.2-.1h.2c.1 0 .1-.1.2-.1.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.3-.1h.3c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.2c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.2-.1h.1c.1 0 .2-.1.1 0h-.1c0 0-.1.0-.1.0-.1.0-.1.0-.1.0-.1.1-.1.1-.1.1-.1.0-.1.0-.2.0-.1.1-.1.1-.2.1-.1.0-.1.0-.1.1-.1.0-.1.0-.1.1c-.1.0-.1.0-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.0.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c0 .1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1s-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1c-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-1.2-1.2h-11.8v-20.1h15v11.8c.0.0.1.1.1.1.1.1.2.2.2.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.2.1.2.2.1.1.1.2.1.2.1.1.1.2.1.2.1 0 .2.0.2.1.1.0.1.0.2.1.1 0 .1.0.2.0.1.0.1.0.2.0.2-.1.1.0.1.0.2-.1.0-.1.0-.2.0-.1-.1-.1.0-.2-.1-.1-.0-.1-.1-.2-.1-.0-.1-.1-.2-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1h-.1c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2h-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2s-.1-.1-.1-.2c-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2-.1-.1-.1-.1-.1-.2L0 12l2.3-2.3C2.1 9.5 2.1 9.4 2.1 9.4c.1-.1.1-.1.1-.1.1-.1.1-.1.1-.2.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1l-.1-.1h-5.2v2.3h5.1l-.1.1c.1.1.2.2.3.3.1.1.2.2.3.3.1.1.2.2.3.3.1.2.2.3.3.4.1.1.2.2.4.3.1.1.3.2.4.2.1.1.3.2.4.2.1 0 .2.0.3.1.1.0.2.0.3.1.1.0.2.0.3.1.1.0.2.0.2.0.1.0.1-.1.1-.1.1-.0.1-.1.1-.1 0-.1.0-.1.0-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c.0-.1.0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c0-.1 0-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1c.1-.1.1-.1.1-.1s.1-.1.1-.1zM11.6 4.3L12 4.7l-7.7 7.7L4 12V2.5c0-.6.5-1.1 1.1-1.1h5.8c.6 0 1.1.5 1.1 1.1v.8l-.4.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.3-.1.4s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3v.1c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1 0 .2-.1.3s-.1.2-.1.3c0 .1-.1.2-.1.3s-.1.2-.1.3c0 0 0 .1-.1.1zM22.5 1.1H16.7L19 3.4l-.1.1c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.4c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.1-.1.2-.1.3s-.1.2-.1.3c-.1.0-.1.1-.1.1s-.1.1-.1.1l-.1.1h-2.3c-.6 0-1.1.5-1.1 1.1v5.8c0 .6.5 1.1 1.1 1.1h10.9c.6 0 1.1-.5 1.1-1.1V2.5c.0-.6-.5-1.1-1.1-1.1z" transform="translate(0 -1)"></path>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">Copy Link</span>
      </a>
      <a href="#" class="flex flex-col items-center justify-center p-3 rounded-md border border-blue-300 dark:border-blue-700 bg-blue-50 dark:bg-gray-700 hover:bg-blue-100 dark:hover:bg-gray-600 transition-colors duration-200 group">
        <svg class="w-7 h-7 text-blue-600 dark:text-blue-400 mb-1 group-hover:text-blue-700 dark:group-hover:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.336 8.797c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C17.969 5.097 17.59 5 17.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM16.89 12.015c-1.396 0-2.529.479-3.414 1.436-.886.957-1.329 2.15-1.329 3.58 0 1.43.443 2.625 1.329 3.581.885.956 2.018 1.434 3.414 1.434 1.39 0 2.518-.479 3.385-1.432.868-.953 1.302-2.147 1.302-3.583 0-1.423-.434-2.618-1.302-3.588-.867-.97-1.995-1.45-3.385-1.45zm0-.5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-16.89 5c.78 0 1.49.208 2.13.626.63.417 1.11 1.01 1.44 1.776.33.766.495 1.579.495 2.433 0 .848-.165 1.66-.495 2.43-.33.77-.81 1.36-1.44 1.78-.64.417-1.35.625-2.13.625-.78 0-1.49-.208-2.13-.625-.63-.418-1.11-1.01-1.44-1.78-.33-.77-.495-1.57-.495-2.43 0-.854.165-1.667.495-2.433.33-.766.81-1.359 1.44-1.776.64-.418 1.35-.626 2.13-.626zm-.5-5c.367-.206.634-.482.784-.797.15-.316.225-.67.225-1.063 0-.393-.075-.742-.225-1.047-.15-.305-.417-.572-.784-.797C5.969 5.097 5.59 5 5.16 5c-.43 0-.79.097-1.08.293-.29.195-.514.467-.674.816-.16.349-.24.717-.24 1.104 0 .38.08.739.24 1.077.16.338.394.615.704.838.31.223.655.334 1.034.334.33 0 .614-.075.852-.224zM12 0C5.372 0 0 5.372 0 12s5.372 12 12 12 12-5.372 12-12S18.628 0 12 0zM5.16 3.5c-.328 0-.62.062-.876.185-.257.124-.469.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zm11.734 0c-.328 0-.62.062-.876.185-.257.124-.47.297-.636.52-.168.223-.277.47-.327.74-.05.27-.075.54-.075.81 0 .27.025.54.075.81.05.27.158.517.327.74.167.223.38.396.636.52.256.123.548.185.876.185.32 0 .61-.06.87-.18s.47-.29.63-.52c.16-.23.27-.47.32-.74.05-.27.075-.54.075-.81 0-.27-.025-.54-.075-.81-.05-.27-.16-.52-.32-.74-.16-.23-.38-.4-.63-.52s-.55-.18-.87-.18zM12 9.015c-.78 0-1.49.208-2.13.626-.63.417-1.11 1.01-1.44 1.776-.33.766-.495 1.579-.495 2.433 0 .848.165 1.66.495 2.43.33.77.81 1.36 1.44 1.78.64.417 1.35.625 2.13.625.78 0 1.49-.208 2.13-.625.63-.418 1.11-1.01 1.44-1.78.33-.77.495-1.57.495-2.43 0-.854-.165-1.667-.495-2.433-.33-.766-.81-1.359-1.44-1.776-.64-.418-1.35-.626-2.13-.626z"/>
        </svg>
        <span class="text-xs text-gray-700 dark:text-gray-200 font-semibold group-hover:text-gray-900 dark:group-hover:text-gray-50">WhatsApp</span>
      </a>
    </div>
    <div class="p-6 border-t border-blue-100 dark:border-blue-700 text-sm text-gray-500 dark:text-gray-400">
      <p>Tip: Click to share. More options coming soon.</p>
      <p class="mt-2 text-blue-500 dark:text-blue-400"><span class="text-blue-600 dark:text-blue-500">guest@website</span>:$ <span class="animate-pulse">_</span></p>
    </div>
  </div>
</div>

Cryptocurrency Dashboard Component

A complex, responsive cryptocurrency dashboard component with a Swiss/International Typography design style, featuring multi-color gradient elements and dark mode support. It includes multiple sections like a portfolio overview, market trends, recent transactions, and a chart.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans p-4 sm:p-6 lg:p-8">

  <!-- Header Section -->
  <header class="flex flex-col sm:flex-row justify-between items-center mb-6 lg:mb-8 font-mono">
    <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight mb-4 sm:mb-0 bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 dark:from-red-300 dark:via-yellow-300 dark:to-blue-300">
      CRYPTO DASHBOARD
    </h1>
    <div class="flex items-center space-x-4">
      <div class="relative">
        <input type="text" placeholder="Search..." class="py-2 px-4 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base">
        <svg class="w-5 h-5 absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" 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>
      <button class="p-2 rounded-full bg-white dark:bg-gray-800 border dark:border-gray-700 hover:ring-2 hover:ring-blue-500 focus:outline-none">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
      </button>
    </div>
  </header>

  <!-- Main Content Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">

    <!-- Portfolio Overview Card -->
    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-300 dark:to-pink-300 capitalize">My Portfolio</h2>
        <button class="text-sm text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400">View All</button>
      </div>
      <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="p-4 rounded-lg border-2 border-transparent bg-gradient-to-br from-green-400 to-blue-500 dark:from-green-600 dark:to-blue-700 shadow-lg group">
          <p class="text-lg sm:text-xl font-semibold text-white">Total Balance</p>
          <p class="text-3xl sm:text-4xl font-bold text-white mt-1">$12,345.67</p>
          <span class="text-green-100 text-sm sm:text-base">+5.21% Today</span>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Bitcoin (BTC)</p>
            <p class="text-xl font-bold dark:text-gray-50">$34,567.89</p>
          </div>
          <div class="text-right">
            <span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+1.23%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~0.5 BTC</p>
          </div>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ethereum (ETH)</p>
            <p class="text-xl font-bold dark:text-gray-50">$2,100.25</p>
          </div>
          <div class="text-right">
            <span class="text-red-500 dark:text-red-400 text-sm sm:text-base">-0.87%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~2.0 ETH</p>
          </div>
        </div>
        <div class="p-4 rounded-lg bg-gray-50 dark:bg-gray-700 shadow flex flex-col justify-between">
          <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">Ripple (XRP)</p>
            <p class="text-xl font-bold dark:text-gray-50">$0.75</p>
          </div>
          <div class="text-right">
            <span class="text-green-500 dark:text-green-400 text-sm sm:text-base">+3.45%</span>
            <p class="text-gray-600 dark:text-gray-300 text-xs sm:text-sm">~1000 XRP</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Market Trends / Price Chart Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl sm:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-300 dark:to-red-300 capitalize">Market Trends</h2>
        <select class="text-sm text-gray-500 dark:text-gray-400 bg-transparent border-none focus:outline-none">
          <option>1 Day</option>
          <option>1 Week</option>
          <option>1 Month</option>
        </select>
      </div>
      <div class="flex-grow flex items-center justify-center">
        <!-- Placeholder for Chart -->
        <img src="https://picsum.photos/400/300?random=1" alt="Placeholder Chart" class="w-full h-auto rounded-md shadow-inner object-cover dark:filter dark:brightness-75">
      </div>
      <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">BTC/USD Price Chart</div>
    </div>

    <!-- Recent Transactions Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8 lg:col-span-2">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-cyan-500 dark:from-teal-300 dark:to-cyan-300 capitalize">Recent Transactions</h2>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead class="bg-gray-50 dark:bg-gray-700">
            <tr>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Amount</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Currency</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Date</th>
              <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+0.012 BTC</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">BTC</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-26</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
              </td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-red-500 dark:text-red-400">Sell</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">-0.5 ETH</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">ETH</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-25</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">Completed</span>
              </td>
            </tr>
            <tr>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-green-500 dark:text-green-400">Buy</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">+100 XRP</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">XRP</td>
              <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2023-10-24</td>
              <td class="px-4 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">Pending</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Quick Actions Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 lg:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-300 dark:to-purple-300 capitalize">Quick Actions</h2>
      <div class="grid grid-cols-2 gap-4">
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-700 text-blue-800 dark:text-blue-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="M9 8h6m-5 0H7M9 8V5a2 2 0 012-2h4a2 2 0 012 2v3m-7 0L4 16m4-8l-.75 4M14 5v10m-3-4h.01M12 16l4-8m-3 8h.01"></path></svg>
          Buy
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-red-100 hover:bg-red-200 dark:bg-red-900 dark:hover:bg-red-700 text-red-800 dark:text-red-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="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"></path></svg>
          Sell
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-yellow-100 hover:bg-yellow-200 dark:bg-yellow-900 dark:hover:bg-yellow-700 text-yellow-800 dark:text-yellow-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
          Send
        </button>
        <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-green-100 hover:bg-green-200 dark:bg-green-900 dark:hover:bg-green-700 text-green-800 dark:text-green-100 font-semibold transition duration-150 ease-in-out">
          <svg class="w-8 h-8 mb-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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          Receive
        </button>
      </div>
    </div>

  </div>

  <!-- Footer/Disclaimer (Optional) -->
  <footer class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Crypto Dashboard. All rights reserved. Data is for informational purposes only. </p>
  </footer>
</div>

Activity Feed Component

A complex, monochromatic dark mode activity feed component for sports/fitness applications, showcasing various user interactions, achievements, and updates responsively.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-400 mb-2">Activity Feed</h2>
      <p class="text-gray-400 text-sm sm:text-base">Keep up with your team's latest achievements and updates.</p>
    </div>

    <div class="space-y-6 p-6">

      <!-- Activity Item: Workout Completion -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">John Doe</a> <span class="text-gray-400">completed a</span> <span class="text-blue-400 font-medium">HIIT Workout</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Duration: 45 min · Calories Burned: 550 kcal</p>
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#FitnessGoal</span>
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#HIIT</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 12 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 5 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">2 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Personal Best -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Jane Smith</a> <span class="text-gray-400">set a new Personal Best in</span> <span class="text-blue-400 font-medium">Cycling (10k sprint)</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Time: 18:30 min · Previous PB: 19:15 min</p>
          <img src="https://picsum.photos/600/300?random=1" alt="Cycling Route" class="rounded-md w-full h-32 object-cover mb-3">
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 28 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 9 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">4 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: Team Challenge Update -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold text-white">⚽</div>
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            The <span class="text-blue-300 hover:text-blue-400">Team Alpha</span> <span class="text-gray-400">advanced to the next round in the</span> <span class="text-blue-400 font-medium">Winter League Cup</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Next Match: Dec 15, 7 PM vs Team Omega</p>
          <div class="flex items-center space-x-2 text-gray-400 text-sm mb-3">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Team Member">
            <span class="text-xs text-gray-500">+5 members involved</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 40 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 15 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">8 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Achievement Unlocked -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Mike Ross</a> <span class="text-gray-400">unlocked the achievement:</span> <span class="text-blue-400 font-medium">'Marathon Finisher'</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Congratulations on finishing your first full marathon!</p>
          <div class="relative w-full h-32 rounded-md overflow-hidden mb-3">
            <img src="https://picsum.photos/600/300?random=2" alt="Marathon run" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent flex items-end p-3">
              <span class="text-2xl font-extrabold text-blue-300 drop-shadow-lg">🏅 Achievement Unlocked!</span>
            </div>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 55 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 20 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">1 day ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 text-center border-t border-gray-800 dark:border-gray-800">
      <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        Load More Activities
      </button>
    </div>
  </div>
</div>

E-commerce Professional Progress Bar

A complex, responsive progress bar component designed for e-commerce, featuring an autumn color scheme (rich oranges, browns, burgundies) and supporting dark mode. It provides a clean, professional look for corporate environments.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 sm:p-8 md:p-10 rounded-lg shadow-xl max-w-4xl mx-auto font-sans text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center text-gray-900 dark:text-white">Your Order Progress</h2>

  <div class="flex justify-between items-center mb-4 text-sm sm:text-base font-semibold text-gray-700 dark:text-gray-300">
    <span>Order ID: <span class="font-medium text-gray-900 dark:text-white">#CUST-2023-98765</span></span>
    <span>Estimated Delivery: <span class="font-medium text-gray-900 dark:text-white">Oct 26, 2023</span></span>
  </div>

  <nav class="flex items-center justify-between relative mb-8">
    <div class="absolute left-0 top-1/2 -mt-0.5 w-full h-1 bg-gray-200 dark:bg-gray-700 rounded-full z-0"></div>
    <div class="absolute left-0 top-1/2 -mt-0.5 w-3/4 rounded-full h-1 bg-orange-700 dark:bg-orange-600 transition-all duration-700 ease-out z-10"></div>

    <ol class="flex justify-between w-full relative z-20">
      <li class="flex flex-col items-center flex-1 min-w-0 pr-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          1
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-900 dark:text-white leading-tight">Order Placed</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 px-1">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          2
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Processing</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 px-1">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-orange-700 dark:bg-orange-600 text-white font-bold text-lg mb-2 sm:mb-3 shadow-md border-2 border-orange-800 dark:border-orange-700">
          3
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">Shipped</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 pl-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
          4
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Out for Delivery</span>
      </li>
      <li class="flex flex-col items-center flex-1 min-w-0 pl-2">
        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full flex items-center justify-center bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 font-bold text-lg mb-2 sm:mb-3 border-2 border-gray-400 dark:border-gray-500">
          5
        </div>
        <span class="text-center text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 leading-tight">Delivered</span>
      </li>
    </ol>
  </nav>

  <div class="bg-orange-50 dark:bg-gray-700 p-4 sm:p-5 rounded-lg border border-orange-200 dark:border-gray-600 flex flex-col sm:flex-row items-start sm:items-center justify-between transition-colors duration-300">
    <div class="flex items-start sm:items-center mb-3 sm:mb-0">
      <img class="w-12 h-12 sm:w-16 sm:h-16 rounded-lg mr-4 object-cover border border-orange-300 dark:border-gray-500" src="https://picsum.photos/100/100?random=1" alt="Product Image">
      <div>
        <p class="font-semibold text-base sm:text-lg text-brown-900 dark:text-white mb-0.5">Autumn Comfort Scarf</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Qty: 1 | Color: Burgundy</p>
        <p class="text-sm font-bold text-orange-800 dark:text-orange-400">$29.99</p>
      </div>
    </div>
    <div class="text-right sm:text-left">
      <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Current Status:</p>
      <p class="text-base font-bold text-orange-700 dark:text-orange-500">Shipped</p>
      <p class="text-xs text-gray-600 dark:text-gray-400">Last updated: Oct 24, 2023, 10:30 AM PST</p>
    </div>
  </div>

  <div class="mt-8 text-center">
    <button class="bg-orange-700 hover:bg-orange-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-bold py-2 px-6 rounded-full inline-flex items-center transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
      <svg class="w-5 h-5 mr-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      View Order Details
    </button>
  </div>
</div>

Glassmorphism Dropdown Menu

A simple, responsive dropdown menu with a glassmorphism design, using purple/violet tones, suitable for technology/SaaS applications. Supports dark mode.

Open Preview

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-sm font-medium text-white hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gradient-to-r dark:from-purple-700 dark:to-indigo-800 dark:hover:from-purple-800 dark:hover:to-indigo-900 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Options
      <svg class="-mr-1 ml-2 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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform transition ease-out duration-200 scale-100 opacity-100" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1 rounded-md bg-white/30 backdrop-blur-lg border border-white/40 dark:bg-gray-800/30 dark:border-gray-700/40" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">
        Account settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">
        Support
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-2">
        License
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-red-100 hover:text-red-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-red-900 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

Search Components

Categories

All Components

Product Gallery Component

Alert Messages Component

Cyberpunk Chart Component - Government/Public

Art Deco Geometric Marketplace Product Card

NeonGlowPagination

Social Share Buttons Component

Cryptocurrency Dashboard Component

Activity Feed Component

E-commerce Professional Progress Bar

Glassmorphism Dropdown Menu