Search Components

All Components

Browse all available Tailwind CSS components

Footer Navigation Component - Industrial Ocean

A complex, responsive footer navigation component in an industrial style with ocean/blue color scheme, suitable for event/conference websites. Includes multi-column links, social media icons, copyright, and dark mode support.

Open Preview

                <footer class="bg-sky-950 text-white dark:bg-gray-950 py-12 md:py-16 border-t-4 border-sky-700 dark:border-gray-800 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
      <!-- Company Info / Logo -->
      <div class="col-span-1 lg:col-span-2 flex flex-col items-start">
        <h2 class="text-3xl font-extrabold text-sky-200 dark:text-sky-400 mb-4 tracking-tight uppercase">
          <span class="block">Event</span>
          <span class="block text-sky-400 dark:text-sky-200">Connect</span>
        </h2>
        <p class="text-sky-300 dark:text-gray-400 text-sm leading-relaxed mb-4">
          Bringing together minds, ideas, and innovations. Your premier platform for unforgettable events and conferences worldwide.
        </p>
        <div class="flex space-x-4">
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 223.75 0c-73.66 0-121.05 44.38-121.05 124.7v70.30H27.5v92.66h74.05V512h94.92V288z"></path></svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96z"></path></svg>
            <span class="sr-only">Twitter</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 114.71C24.09 114.71 0 91.63 0 62.84 0 34.05 24.09 11.05 53.79 11.05c29.7 0 53.79 23 53.79 51.79 0 28.79-24.1 51.79-53.79 51.79zM448 448h-92.68V302.4c0-34.74-27.02-63.53-63.07-63.53-34.88 0-56.36 25.35-65.73 40.57h-.42V448H172.5V148.9h92.54v33.43c12.26-21.72 40.16-59.54 102.4-59.54 77.29 0 137.4 69.49 137.4 165.48z"></path></svg>
            <span class="sr-only">LinkedIn</span>
          </a>
          <a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
            <svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 204.2c-56.3 0-102.2 45.9-102.2 102.2s45.9 102.2 102.2 102.2S326.3 362.5 326.3 306.2 280.4 204.2 224.1 204.2zm0 159.2c-31.9 0-57.8-25.9-57.8-57.8s25.9-57.8 57.8-57.8 57.8 25.9 57.8 57.8-26 57.8-57.8 57.8z"></path><path d="M185 36h78.8c.8 0 1.2.6 1.2 1.3 0 2.2-1.7 4.1-3.9 4.1H185c-2.2 0-3.9-1.9-3.9-4.1 0-.7.4-1.3 1.2-1.3zM.4 121.7C.3 121.2 0 120.5 0 119.8V42.6c0-4.6 3.4-8.8 8.1-9.3 4.7-.5 9.1 2.3 10.9 6.8l.6 1.4-15.6 15.6c-.6.6-.9 1.4-.9 2.2v43.2c0 .8.3 1.6.9 2.2l15.6 15.6-.6 1.4c-1.8 4.5-6.2 7.3-10.9 6.8-4.7-.5-8.1-4.7-8.1-9.3v-77.2c0-.7-.3-1.3-.4-1.8z"></path><path d="M384 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm-48.9 154.5v198.8c0 24.9-20.2 45.1-45.1 45.1H159.2c-24.9 0-45.1-20.2-45.1-45.1V154.5c0-24.9 20.2-45.1 45.1-45.1h130.8c24.9 0 45.1 20.2 45.1 45.1zm-8.8-97.8c-2.4 0-4.8 1-6.5 2.7-1.7 1.7-2.7 4.1-2.7 6.5s1 4.8 2.7 6.5c1.7 1.7 4.1 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4.1 2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4.1-2.7-6.5-2.7z"></path></svg>
            <span class="sr-only">Instagram</span>
          </a>
        </div>
      </div>

      <!-- Navigation Links -->
      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">About</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Our Mission</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Team</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Partners</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Careers</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Events</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Upcoming Events</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Past Events</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Submit a Proposal</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Sponsor An Event</a></li>
        </ul>
      </div>

      <div class="col-span-1">
        <h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Support</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">FAQ</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Contact Us</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Privacy Policy</a></li>
          <li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Terms of Service</a></li>
        </ul>
      </div>
    </div>

    <!-- Newsletter Signup -->
    <div class="mt-12 pt-8 border-t border-sky-700 dark:border-gray-800 flex flex-col items-center justify-between text-center md:flex-row md:text-left gap-6">
      <div class="max-w-md">
        <h3 class="text-xl font-bold text-sky-200 dark:text-sky-400 mb-2">Stay Connected</h3>
        <p class="text-sky-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest updates on events and industry insights.</p>
      </div>
      <form class="flex flex-col sm:flex-row w-full max-w-sm space-y-3 sm:space-y-0 sm:space-x-3">
        <label for="email-address" class="sr-only">Email address</label>
        <input id="email-address" name="email" type="email" autocomplete="email" required
               class="w-full appearance-none rounded-md border border-sky-600 dark:border-gray-700 px-4 py-2 text-gray-900 placeholder-gray-500 rounded-lg
                      focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm
                      bg-sky-100 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400"
               placeholder="Enter your email">
        <button type="submit"
                class="flex-shrink-0 rounded-md border border-transparent bg-sky-600 px-4 py-2 text-base font-medium text-white shadow-sm
                       hover:bg-sky-700 dark:bg-sky-700 dark:hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
                       dark:focus:ring-offset-gray-950 transition-colors duration-300">
          Subscribe
        </button>
      </form>
    </div>

    <!-- Copyright -->
    <div class="mt-8 pt-8 border-t border-sky-800 dark:border-gray-700 text-center text-sky-400 dark:text-gray-500 text-xs">
      &copy; <span id="current-year"></span> EventConnect. All rights reserved. Built with <span class="text-red-400">&hearts;</span>
    </div>
  </div>
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Corporate/Professional Fashion/Beauty Gallery

A clean, trustworthy, and responsive image gallery component suitable for corporate fashion and beauty brands, featuring a triadic color scheme and dark mode support.

Open Preview

                <section class="py-12 bg-indigo-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold mb-4 text-indigo-800 dark:text-indigo-400">Our Latest Collection</h2>
      <p class="text-lg leading-relaxed max-w-2xl mx-auto text-gray-600 dark:text-gray-400">Explore our exquisite range of fashion and beauty essentials, curated with elegance and precision for the modern individual.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Gallery Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1012/600/400" alt="Fashion Model" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Spring Elegance Dress</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A timeless piece designed for ultimate comfort and style.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$120</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Discover the perfect blend of modern design and classic appeal.</p>
        </div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1015/600/400" alt="Beauty Product" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Radiant Glow Serum</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Achieve glowing skin with our specially formulated serum.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$45</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Infused with natural extracts to revitalize and nourish your complexion.</p>
        </div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1018/600/400" alt="Accesory" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Luxury Leather Bag</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Crafted from premium leather, a statement of true sophistication.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$280</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Perfect for every occasion, combining elegance with practical design.</p>
        </div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1020/600/400" alt="Cosmetic" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Velvet Matte Lipstick</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Intensely pigmented for a rich, long-lasting matte finish.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$25</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Experience a smooth application and vivid color that stays all day.</p>
        </div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1025/600/400" alt="Footwear" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Elegant Pointed Heels</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Sophistication meets comfort in these meticulously crafted heels.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$95</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Step out in confidence with our latest collection of chic footwear.</p>
        </div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1033/600/400" alt="Skincare" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Hydrating Face Mask</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Rejuvenate your skin with our deeply hydrating and nourishing mask.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$30</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Pamper your skin with a rich blend of essential vitamins and minerals.</p>
        </div>
      </div>

      <!-- Gallery Item 7 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1041/600/400" alt="Jewelry" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Dazzling Diamond Necklace</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">A sparkling statement piece, perfect for any special occasion.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$350</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Add a touch of brilliance to your ensemble with this exquisite design.</p>
        </div>
      </div>

      <!-- Gallery Item 8 -->
      <div class="group relative overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-800 transition-transform duration-300 transform hover:scale-105 hover:shadow-xl">
        <img src="https://picsum.photos/id/1043/600/400" alt="Fragrance" class="w-full h-64 object-cover object-center transition-all duration-500 group-hover:brightness-75">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-indigo-700 dark:text-indigo-300">Sophisticated Eau de Parfum</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">An enchanting blend of notes, capturing timeless elegance.</p>
          <div class="mt-3 flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$85</span>
            <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline text-sm">View Details</a>
          </div>
        </div>
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-sm opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Leave a lasting impression with this luxurious and captivating scent.</p>
        </div>
      </div>

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

Monospace_Developer_CAPTCHA_Component

A complex, code-inspired CAPTCHA component with a monospace font, terminal aesthetics, and a complementary color scheme, designed for a portfolio to showcase work. Fully responsive with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border-2 border-green-500 dark:border-purple-500 transform transition-all duration-300 hover:scale-105">
    <div class="bg-green-600 dark:bg-purple-600 p-3 flex items-center justify-between">
      <div class="flex space-x-2">
        <span class="p-1.5 rounded-full bg-red-500"></span>
        <span class="p-1.5 rounded-full bg-yellow-500"></span>
        <span class="p-1.5 rounded-full bg-green-500"></span>
      </div>
      <p class="text-white opacity-90 text-sm">$ interactive_captcha.sh</p>
      <button aria-label="Minimize window" class="text-white text-lg leading-none align-middle transform rotate-45 hover:text-gray-300 transition-colors duration-200">+</button>
    </div>
    <div class="p-6 space-y-6 text-gray-800 dark:text-gray-200">
      <p class="text-lg font-bold text-green-700 dark:text-purple-400">// SYSTEM_INIT: Verifying Human Identity...</p>
      <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-md border border-gray-700 dark:border-gray-600 shadow-inner flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 items-center justify-between">
        <div class="flex-shrink-0 w-32 h-24 bg-gray-900 dark:bg-gray-800 rounded-sm overflow-hidden border border-gray-600 dark:border-gray-500 flex items-center justify-center">
          <img src="https://picsum.photos/seed/captcha1/128/96" alt="CAPTCHA image" class="w-full h-full object-cover grayscale opacity-80">
        </div>
        <div class="flex-grow text-sm text-gray-200 dark:text-gray-300">
          <p class="mb-2">&gt; Type the characters you see in the image:</p>
          <div class="flex space-x-2">
            <span class="px-2 py-1 bg-green-500 text-gray-900 rounded inline-block transform -rotate-6 text-lg font-extrabold shadow-md">A</span>
            <span class="px-2 py-1 bg-yellow-500 text-gray-900 rounded inline-block transform rotate-3 text-lg font-extrabold shadow-md">b</span>
            <span class="px-2 py-1 bg-blue-500 text-gray-900 rounded inline-block transform -rotate-2 text-lg font-extrabold shadow-md">C</span>
            <span class="px-2 py-1 bg-red-500 text-gray-900 rounded inline-block transform rotate-5 text-lg font-extrabold shadow-md">1</span>
            <span class="px-2 py-1 bg-purple-500 text-gray-900 rounded inline-block transform -rotate-4 text-lg font-extrabold shadow-md">2</span>
          </div>
        </div>
      </div>
      <div class="space-y-4">
        <label for="captcha-input" class="block text-sm font-semibold text-green-600 dark:text-purple-400">$USER_INPUT:</label>
        <input type="text" id="captcha-input" placeholder="&gt; your_response_here" class="w-full p-3 rounded-md bg-gray-900 dark:bg-gray-700 text-green-300 dark:text-purple-300 border border-green-700 dark:border-purple-600 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500 font-mono text-base shadow-sm leading-relaxed caret-green-500 dark:caret-purple-500">
        <div class="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
          <button class="flex-1 py-3 px-6 bg-green-600 hover:bg-green-700 dark:bg-purple-600 dark:hover:bg-purple-700 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-purple-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" 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="M5 13l4 4L19 7"></path></svg>
            VERIFY <span class="hidden sm:inline">[ACCEPT]</span>
          </button>
          <button class="flex-1 py-3 px-6 bg-gray-500 hover:bg-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 text-white rounded-md font-bold text-lg transition-colors duration-200 shadow-lg transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
            <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" 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 4v5h.582m15.356 2A8.001 8.001 0 004 13v-1m6.7-6.7L7 7m0 0l-3.72 3.72M7 7V4"></path></svg>
            RELOAD <span class="hidden sm:inline">[TRY_AGAIN]</span>
          </button>
        </div>
      </div>
      <p class="text-sm text-gray-500 dark:text-gray-400">// STATUS: Awaiting input from user...</p>
    </div>
    <div class="bg-gray-800 dark:bg-gray-700 p-3 pt-2 text-xs text-gray-400 dark:text-gray-500 flex justify-between items-center">
      <p>@ 2023 INTERACTIVE_DEV.SYS</p>
      <a href="#" class="text-green-500 dark:text-purple-400 hover:underline">help.md</a>
    </div>
  </div>
</div>

Notifications Component

A simple, clean, and high-contrast notifications component suitable for corporate/professional booking and reservation systems, with full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-start justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Notifications</h2>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">Your latest updates regarding bookings and appointments.</p>
    </div>

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

      <!-- Notification Item 1 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-200 flex items-center justify-center text-lg">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Appointment Confirmed</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your appointment with Dr. Smith on Oct 26, 2023 at 10:00 AM has been confirmed.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-200 flex items-center justify-center text-lg">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Booking Completed</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Your 'Premium Suite' reservation for Nov 1-3, 2023 is successfully booked.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 sm:p-6 flex items-start gap-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors duration-200">
        <div class="flex-shrink-0 w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-200 flex items-center justify-center text-lg">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
          </svg>
        </div>
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Booking Reminder</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't forget your upcoming reservation for the 'Conference Room A' on Oct 28 at 2:00 PM.</p>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 flex justify-center">
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium text-sm transition-colors duration-200">
        View all notifications
      </a>
    </div>
  </div>
</div>

CAPTCHA Component

A Material Design inspired CAPTCHA component with a vibrant color scheme, designed for social media applications. Fully responsive with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans tracking-wide">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:shadow-2xl sm:p-5 p-4">
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white capitalize">I'm not a robot</h2>
      <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <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" />
      </svg>
    </div>

    <div class="grid grid-cols-3 gap-3 mb-6">
      <img src="https://picsum.photos/id/237/100/100" alt="Image Grid 1" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/238/100/100" alt="Image Grid 2" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/239/100/100" alt="Image Grid 3" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/240/100/100" alt="Image Grid 4" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/241/100/100" alt="Image Grid 5" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/242/100/100" alt="Image Grid 6" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/243/100/100" alt="Image Grid 7" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/244/100/100" alt="Image Grid 8" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
      <img src="https://picsum.photos/id/245/100/100" alt="Image Grid 9" class="w-full h-auto aspect-square object-cover rounded-md border-2 border-transparent hover:border-indigo-500 dark:hover:border-indigo-400 cursor-pointer transition-all duration-200 ease-in-out">
    </div>

    <p class="mb-6 text-gray-600 dark:text-gray-300 text-sm md:text-base">Please select all squares with <span class="font-semibold text-indigo-700 dark:text-indigo-400">vehicles</span>.</p>

    <div class="flex justify-end">
      <button class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
        Verify
      </button>
    </div>

    <div class="flex items-center justify-between text-xs mt-6 text-gray-500 dark:text-gray-400">
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Privacy</a>
      <a href="#" class="underline hover:text-indigo-600 dark:hover:text-indigo-400 transition">Terms</a>
    </div>
  </div>
</div>

ArtDecoEducationalGrid

A complex, responsive grid layout component for educational platforms, styled with Art Deco geometric patterns and rich autumn colors. Includes dark mode support and multiple interactive elements.

Open Preview

                <div class="p-4 sm:p-8 bg-zinc-100 dark:bg-zinc-900 font-serif text-zinc-900 dark:text-zinc-50 min-h-screen">
  <div class="max-w-7xl mx-auto space-y-12">

    <!-- Header Section -->
    <header class="text-center space-y-4 pt-8 pb-12 rounded-xl border-4 border-amber-600 dark:border-amber-400 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-zinc-800 dark:to-zinc-800/50 shadow-lg dark:shadow-xl shadow-amber-300/30 dark:shadow-amber-900/50 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/art-deco.png')] opacity-20 dark:opacity-10 pointer-events-none"></div>
      <h1 class="relative z-10 text-5xl sm:text-6xl font-extrabold text-amber-900 uppercase tracking-widest leading-tight drop-shadow-lg dark:text-amber-300">
        The Grand Hall of Knowledge
      </h1>
      <p class="relative z-10 text-xl sm:text-2xl font-light text-amber-800 dark:text-amber-200 mt-4">
        Explore the Foundations of Thought and Creativity
      </p>
      <div class="relative z-10 mt-8">
        <button class="px-8 py-4 bg-amber-700 hover:bg-amber-800 text-white font-bold text-lg rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
          Start Your Journey
        </button>
      </div>
    </header>

    <!-- Main Content Grid -->
    <main class="grid grid-cols-1 md:grid-cols-3 gap-8">

      <!-- Featured Course Card -->
      <section class="md:col-span-2 bg-gradient-to-br from-red-800 to-red-900 dark:from-red-900 dark:to-red-950 p-6 sm:p-8 rounded-xl shadow-2xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden group">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/argyle.png')] opacity-10 dark:opacity-5 pointer-events-none"></div>
        <div class="relative z-10 flex flex-col sm:flex-row gap-6 items-center">
          <img src="https://picsum.photos/seed/course1/400/300" alt="Featured Course" class="w-full sm:w-2/5 md:w-1/2 lg:w-2/5 aspect-video object-cover rounded-lg border-2 border-amber-300 shadow-md transform group-hover:scale-102 transition duration-300">
          <div class="flex-1 text-white">
            <h2 class="text-4xl font-bold mb-3 text-amber-200 leading-tight drop-shadow-md">Mastering Art Deco Design Principles</h2>
            <p class="text-lg text-amber-100 mb-4 line-clamp-3">Dive deep into the golden age of Art Deco, exploring its iconic geometric forms, opulent materials, and timeless elegance.</p>
            <ul class="text-amber-50 text-sm space-y-1 mb-4">
              <li><strong class="text-amber-200">Lectures:</strong> 12</li>
              <li><strong class="text-amber-200">Duration:</strong> 18 Hours</li>
              <li><strong class="text-amber-200">Instructor:</strong> Dr. Eleanor Vance</li>
            </ul>
            <a href="#" class="inline-block px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white font-semibold rounded-full shadow-lg transition duration-300 ease-in-out transform hover:translate-y-1 focus:outline-none focus:ring-4 focus:ring-amber-300/50 dark:bg-amber-500 dark:hover:bg-amber-600 dark:focus:ring-amber-400/50">
              Enroll Now
            </a>
          </div>
        </div>
      </section>

      <!-- Quick Links / Navigation -->
      <nav class="bg-zinc-200 dark:bg-zinc-800 p-6 rounded-xl shadow-lg border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/crissxcross.png')] opacity-20 dark:opacity-10"></div>
        <h2 class="relative z-10 text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Quick Access</h2>
        <ul class="relative z-10 space-y-4">
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Browse Courses</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zm-4 4a2 2 0 100 4 2 2 0 000-4zm-8-2a2 2 0 11-4 0 2 2 0 014 0zM7 8a2 2 0 100-4 2 2 0 000 4z"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Meet Instructors</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-4 bg-zinc-300 dark:bg-zinc-700 rounded-lg transform hover:scale-105 transition duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-amber-500 border border-zinc-400 dark:border-zinc-600">
              <svg class="h-6 w-6 mr-3 text-amber-700 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h4m2 0h4a2 2 0 002-2V6a2 2 0 00-2-2h-4m0 16V6"></path></svg>
              <span class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">My Dashboard</span>
            </a>
          </li>
        </ul>
      </nav>

      <!-- Latest Articles Section -->
      <section class="md:col-span-3 bg-zinc-50 dark:bg-zinc-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-400">
        <h2 class="text-3xl font-bold text-amber-900 dark:text-amber-300 mb-6 text-center">Latest Insights from Our Scholars</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

          <!-- Article Card 1 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article1/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Geometry of Gotham: Art Deco Skyscrapers</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Explore the architectural marvels that defined a city, from the Chrysler Building to the Empire State Building.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By Jane Doe - <time datetime="2023-10-26">Oct 26, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

          <!-- Article Card 2 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article2/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">Autumnal Palettes in Historical Art: A Study</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">Discover how masters throughout history captured the vibrant and melancholic beauty of autumn.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By John Smith - <time datetime="2023-10-20">Oct 20, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

          <!-- Article Card 3 -->
          <article class="bg-white dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition duration-300 overflow-hidden border border-zinc-200 dark:border-zinc-700 transform hover:scale-102 group">
            <img src="https://picsum.photos/seed/article3/500/300" alt="Article Image" class="w-full h-48 object-cover rounded-t-lg group-hover:brightness-90 transition duration-300">
            <div class="p-5">
              <h3 class="text-xl font-semibold text-amber-900 dark:text-amber-200 mb-2 line-clamp-2">The Resurgence of Craftsmanship in the Digital Age</h3>
              <p class="text-zinc-700 dark:text-zinc-300 text-sm line-clamp-3 mb-3">An exploration into how traditional skills are finding new relevance and expression today.</p>
              <div class="flex items-center text-zinc-600 dark:text-zinc-400 text-xs mb-3">
                <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Author" class="w-8 h-8 rounded-full mr-2 border border-amber-400">
                <span>By Emily White - <time datetime="2023-10-15">Oct 15, 2023</time></span>
              </div>
              <a href="#" class="inline-block text-amber-700 dark:text-amber-300 font-semibold hover:underline">
                Read More <span aria-hidden="true">&rarr;</span>
              </a>
            </div>
          </article>

        </div>
      </section>

      <!-- Testimonial / Quote Section -->
      <section class="md:col-span-2 bg-gradient-to-br from-orange-200 to-orange-300 dark:from-orange-950 dark:to-orange-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/lined-paper.png')] opacity-20 dark:opacity-5 pointer-events-none"></div>
        <blockquote class="relative z-10 text-center">
          <p class="text-3xl font-light italic text-orange-950 dark:text-orange-100 mb-6 drop-shadow-sm leading-relaxed">
            "This platform is a true masterpiece – a seamless blend of historical elegance and cutting-edge education. My learning journey has been endlessly enriched."
          </p>
          <footer class="text-lg font-bold text-orange-900 dark:text-orange-200 flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Student Avatar" class="w-16 h-16 rounded-full mb-3 border-4 border-orange-500 dark:border-orange-400 shadow-md">
            <span>Alexander Vance, <span class="font-normal">Alumni</span></span>
          </footer>
        </blockquote>
      </section>

      <!-- Call to Action / Newsletter -->
      <aside class="bg-red-700 dark:bg-red-900 p-6 sm:p-8 rounded-xl shadow-xl border-4 border-amber-500 dark:border-amber-400 relative overflow-hidden flex flex-col justify-between">
        <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/pyramid.png')] opacity-10 dark:opacity-5"></div>
        <h2 class="relative z-10 text-3xl font-bold text-white dark:text-amber-200 mb-4 text-center">Join Our Guild</h2>
        <p class="relative z-10 text-white text-center mb-6">
          Get the latest course updates, exclusive insights, and special offers delivered to your inbox.
        </p>
        <form class="relative z-10 flex flex-col gap-4">
          <input type="email" placeholder="Your email address" class="w-full p-4 rounded-lg bg-red-800/70 dark:bg-red-950/70 text-white placeholder-red-200 dark:placeholder-red-300 border-2 border-red-900 dark:border-red-800 focus:outline-none focus:ring-2 focus:ring-amber-300 focus:border-amber-300">
          <button type="submit" class="w-full px-6 py-4 bg-amber-500 hover:bg-amber-600 dark:bg-amber-400 dark:hover:bg-amber-500 text-red-900 font-bold rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300/50">
            Subscribe Now
          </button>
        </form>
      </aside>
    </main>

    <!-- Decorative Footer -->
    <footer class="text-center pt-12 pb-8 text-zinc-700 dark:text-zinc-400 border-t-4 border-amber-600 dark:border-amber-400 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/shattered.png')] opacity-10 dark:opacity-5"></div>
      <p class="relative z-10 text-lg">
        &copy; 2023 Grand Hall of Knowledge. All rights reserved.
      </p>
    </footer>

  </div>
</div>

Hamburger Menu Component

A responsive hamburger menu component inspired by Memphis Design with a sepia/brown color scheme, suitable for entertainment/media platforms. It includes dark mode support and playful geometric accents.

Open Preview

                <div class="relative bg-amber-50 dark:bg-stone-900 overflow-hidden font-sans text-stone-800 dark:text-stone-200">
  <div class="container mx-auto px-4 py-6 md:py-8 relative z-10">
    <div class="flex items-center justify-between">
      <div class="flex-shrink-0">
        <a href="#" class="text-2xl md:text-3xl font-extrabold tracking-tight text-amber-800 dark:text-amber-300 transform -skew-x-6 inline-block py-1 px-3 border-4 border-amber-800 dark:border-amber-300 rotate-2">
          STREAMIFY
        </a>
      </div>
      <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Home</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Movies</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Series</a>
        <a href="#" class="text-lg font-semibold hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out relative before:absolute before:content-[''] before:w-0 before:h-1 before:bottom-0 before:left-0 before:bg-amber-600 dark:before:bg-amber-400 before:transition-all before:duration-300 before:ease-in-out hover:before:w-full">Explore</a>
        <button class="px-6 py-2 bg-amber-800 text-amber-50 rounded-full font-bold shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
          Sign In
        </button>
      </div>
      <div class="md:hidden flex items-center">
        <button id="menu-button" class="text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-125">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Invisible by default, will be toggled by JS) -->
  <div id="mobile-menu" class="absolute top-0 left-0 w-full h-screen bg-stone-100 dark:bg-stone-950 transform -translate-x-full transition-transform duration-500 ease-in-out md:hidden flex flex-col justify-center items-center space-y-8 z-50 overflow-hidden">
    <button id="close-menu-button" class="absolute top-6 right-6 text-stone-800 dark:text-stone-200 p-2 focus:outline-none transform scale-150">
      <svg class="w-8 h-8" 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>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse">Home</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-100">Movies</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-200">Series</a>
    <a href="#" class="text-4xl font-bold text-amber-800 dark:text-amber-300 hover:text-amber-700 dark:hover:text-amber-400 transition duration-300 ease-in-out origin-center animate-pulse animation-delay-300">Explore</a>
    <button class="mt-8 px-8 py-3 bg-amber-800 text-amber-50 rounded-full font-bold text-xl shadow-lg hover:bg-amber-900 border-2 border-transparent transition duration-300 ease-in-out dark:bg-amber-600 dark:text-stone-900 dark:hover:bg-amber-700 dark:hover:text-stone-50 border-amber-800 dark:border-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-500 focus:ring-opacity-50">
      Join Now
    </button>
  </div>

  <!-- Memphis-style geometric accents -->
  <div class="absolute top-0 -left-1/4 w-3/4 h-full bg-amber-200 dark:bg-stone-700 opacity-60 transform -skew-y-6 rotate-3 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-0 -right-1/4 w-1/2 h-2/3 bg-amber-400 dark:bg-stone-600 opacity-60 transform skew-y-3 -rotate-6 z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute top-1/4 right-1/4 w-32 h-32 bg-amber-600 dark:bg-amber-800 opacity-70 transform rotate-45 rounded-full z-0 pointer-events-none mix-blend-multiply"></div>
  <div class="absolute bottom-1/4 left-1/4 w-16 h-16 bg-amber-300 dark:bg-stone-500 opacity-80 transform -rotate-30 border-8 border-dashed border-amber-800 dark:border-stone-400 z-0 pointer-events-none"></div>

</div>

<style>
  /* Custom animation delay for pulse effect */
  .animation-delay-100 {
    animation-delay: 0.1s;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-300 {
    animation-delay: 0.3s;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const closeMenuButton = document.getElementById('close-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('-translate-x-full');
      mobileMenu.classList.add('translate-x-0');
      document.body.style.overflow = 'hidden'; // Prevent body scroll when menu is open
    });

    closeMenuButton.addEventListener('click', function() {
      mobileMenu.classList.remove('translate-x-0');
      mobileMenu.classList.add('-translate-x-full');
      document.body.style.overflow = ''; // Allow body scroll
    });

    // Close menu if a menu item is clicked (optional)
    mobileMenu.querySelectorAll('a').forEach(item => {
      item.addEventListener('click', function() {
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      });
    });

    // Close menu on resize if it's open and transitions to desktop view
    window.addEventListener('resize', function() {
      if (window.innerWidth >= 768) { // Tailwind's 'md' breakpoint
        mobileMenu.classList.remove('translate-x-0');
        mobileMenu.classList.add('-translate-x-full');
        document.body.style.overflow = '';
      }
    });
  });
</script>

Product Comparison Component - Cyberpunk Retro Charity

A simple, responsive product comparison component designed with a cyberpunk aesthetic using a retro/vintage color palette, intended for non-profit/charity organizations. Features dark mode support and a clean, minimalist layout.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-900 font-sans p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl">
  <h2 class="text-3xl sm:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
    Choose Your Impact
  </h2>

  <div class="flex flex-col lg:flex-row justify-center items-stretch gap-6">

    <!-- Left Product/Option -->
    <div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-fuchsia-500 dark:border-fuchsia-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-fuchsia-300/10 via-fuchsia-500/10 to-transparent pointer-events-none rounded-lg"></div>
      <div class="relative z-10">
        <h3 class="text-2xl font-bold text-fuchsia-600 dark:text-fuchsia-400 mb-4 tracking-wider uppercase">Basic Support</h3>
        <img src="https://picsum.photos/seed/charity1/300/200" alt="Basic Support" class="w-full h-40 object-cover rounded-md mb-4 border border-fuchsia-400/50">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
          Provide essential resources like a warm meal and a blanket for someone in need.
          Every small contribution makes a significant difference in their daily lives.
        </p>
        <ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20"><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>Warm Meal</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" ><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>Comfort Blanket</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-fuchsia-500 dark:text-fuchsia-400" fill="currentColor" viewBox="0 0 20 20" ><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>Hygiene Kit</li>
        </ul>
        <p class="text-center text-3xl font-extrabold text-fuchsia-700 dark:text-fuchsia-300 mb-6">$15 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
        <button class="w-full py-3 px-6 bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Select Basic Support</span>
        </button>
      </div>
    </div>

    <!-- Right Product/Option -->
    <div class="flex-1 max-w-sm w-full lg:w-1/2 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-md p-6 border-2 border-teal-500 dark:border-teal-700 relative overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-teal-300/10 via-teal-500/10 to-transparent pointer-events-none rounded-lg"></div>
      <div class="relative z-10">
        <h3 class="text-2xl font-bold text-teal-600 dark:text-teal-400 mb-4 tracking-wider uppercase">Enhanced Impact</h3>
        <img src="https://picsum.photos/seed/charity2/300/200" alt="Enhanced Impact" class="w-full h-40 object-cover rounded-md mb-4 border border-teal-400/50">
        <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
          Contribute to long-term solutions, vocational training, and safe shelter programs.
          Empower individuals to rebuild their lives and achieve self-sufficiency.
        </p>
        <ul class="text-gray-600 dark:text-gray-400 text-sm mb-6 space-y-2">
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20"><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>Vocational Training</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" ><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>Safe Shelter Access</li>
          <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-teal-500 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" ><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>Mentorship Programs</li>
        </ul>
        <p class="text-center text-3xl font-extrabold text-teal-700 dark:text-teal-300 mb-6">$45 <span class="text-base font-normal text-gray-500 dark:text-gray-400">/ once</span></p>
        <button class="w-full py-3 px-6 bg-teal-600 hover:bg-teal-700 text-white font-bold rounded-md transition duration-300 ease-in-out transform hover:scale-105 shadow-lg relative overflow-hidden group">
          <span class="absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          <span class="relative z-10">Select Enhanced Impact</span>
        </button>
      </div>
    </div>

  </div>
</div>

Back to Top Button Component

A responsive 'Back to Top' button with an artistic watercolor design, autumn color scheme, and dark mode support, suitable for blog/content sites.

Open Preview

                <div class="fixed bottom-4 right-4 z-50">
  <a href="#top" aria-label="Back to top" class="group outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full transition-all duration-300 ease-in-out">
    <div class="relative flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 rounded-full overflow-hidden shadow-xl 
                bg-gradient-to-br from-amber-600 to-red-800 dark:from-amber-800 dark:to-red-950 
                group-hover:scale-105 group-active:scale-95 transition-all duration-300 ease-in-out 
                border-2 border-orange-200 dark:border-orange-900 
                group-hover:border-orange-50 dark:group-hover:border-orange-800">
      
      <!-- Artistic Background Element (faux watercolor effect) -->
      <div class="absolute inset-0 opacity-70 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
        <div class="absolute w-full h-full transform rotate-45 scale-150" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><filter id=\'f1\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feMorphology operator=\'dilate\' radius=\'2\'/><feGaussianBlur stdDeviation=\'2\'/></filter><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'orange\' filter=\'url(%23f1)\' opacity=\'0.5\'/></svg>'); background-size: cover; background-position: center; border-radius: 50%; opacity: 0.1;"></div>
        <div class="absolute w-full h-full transform -rotate-30 scale-120" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><filter id=\'f1\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feMorphology operator=\'dilate\' radius=\'2\'/><feGaussianBlur stdDeviation=\'2\'/></filter><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'brown\' filter=\'url(%23f1)\' opacity=\'0.5\'/></svg>'); background-size: cover; background-position: center; border-radius: 50%; opacity: 0.1;"></div>
        <div class="absolute w-full h-full transform rotate-60 scale-130" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><filter id=\'f1\'><feTurbulence type=\'fractalNoise\' baseFrequency=\'0.02\' numOctaves=\'3\' stitchTiles=\'stitch\'/><feColorMatrix type=\'saturate\' values=\'0\'/><feMorphology operator=\'dilate\' radius=\'2\'/><feGaussianBlur stdDeviation=\'2\'/></filter><rect x=\'0\' y=\'0\' width=\'100\' height=\'100\' fill=\'maroon\' filter=\'url(%23f1)\' opacity=\'0.5\'/></svg>'); background-size: cover; background-position: center; border-radius: 50%; opacity: 0.12;"></div>
      </div>

      <!-- Main Arrow Icon -->
      <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white dark:text-gray-200 
                  group-hover:-translate-y-1 transition-transform duration-300 ease-in-out" 
           xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="12 19 12 5"></polyline>
        <polyline points="5 12 12 5 19 12"></polyline>
      </svg>

      <!-- Optional: Small decorative leaf icon for artistic touch -->
      <div class="absolute top-1 left-1 sm:top-2 sm:left-2 opacity-50 group-hover:opacity-80 transition-opacity duration-300 ease-in-out">
        <svg class="w-4 h-4 sm:w-5 sm:h-5 text-orange-200 dark:text-orange-300 -rotate-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <path d="M11 20A7 7 0 0 1 9.86 6.47c-.91-1.3-4.4-3.5-4.4-3.5A2 2 0 0 0 2 4.47l.53 2.53c-.36 1.06-.6 2.3-.6 3.65C2 17.13 8.37 22 15 22h2c2.76 0 5-2 5-4s-2.76-4-5-4h-2.18c-.75 0-1.46.24-2.07.67A7 7 0 0 1 11 20z"></path>
          <path d="M11.5 6.5s2.5 2.5 5 0 2.5-5 0-5-5 2.5-5 0"></path>
        </svg>
      </div>
    </div>
  </a>
</div>

Luxury_Premium_Crypto_Footer

An elegant, responsive footer component for cryptocurrency/blockchain applications, featuring a limited number of links, copyright, and social media icons. Uses a corporate blue color scheme with dark mode support.

Open Preview

                <footer class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-12 dark:from-gray-950 dark:to-gray-800">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row items-center justify-between space-y-8 md:space-y-0">
      <!-- Logo / Brand Name -->
      <div class="flex-shrink-0">
        <a href="#" class="text-3xl font-bold tracking-tight text-white dark:text-blue-300 font-serif">
          Crypto<span class="text-blue-300 dark:text-blue-500">Ledger</span>
        </a>
      </div>

      <!-- Navigation Links -->
      <nav class="flex flex-wrap justify-center gap-x-8 gap-y-4 text-lg font-medium">
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Home</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Products</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">About Us</a>
        <a href="#" class="hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">Contact</a>
      </nav>

      <!-- Social Media Icons (simplified for a simple design) -->
      <div class="flex space-x-6">
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22C17.388 21.125 22 16.592 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-white hover:text-blue-200 transition-colors duration-300 dark:hover:text-blue-400">
          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.31c9 0 13.92-7.46 13.92-13.97 0-.21-.01-.42-.01-.63A10.02 10.02 0 0024 4.31a9.91 9.91 0 01-2.88.79 4.96 4.96 0 002.16-2.77 9.87 9.87 0 01-3.13 1.19A4.95 4.95 0 0012.06 6.3c-4.99 0-9.05 4.06-9.05 9.06 0 .71.07 1.4.21 2.06A14.07 14.07 0 001.3 6.94a4.95 4.95 0 001.54 6.57A4.9 4.9 0 011.83 12v.06a4.96 4.96 0 003.97 4.86 4.92 4.92 0 01-1.78.07 4.96 4.96 0 004.62 3.44c-3.79 2.98-8.54 4.54-13.79 4.54-1.12 0-2.22-.07-3.29-.18C3.06 22.13 7.82 20.31 8.29 20.31z"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="mt-8 pt-8 border-t border-blue-600 dark:border-gray-700 text-center text-sm text-blue-100 dark:text-gray-400">
      &copy; 2023 CryptoLedger. All rights reserved.
    </div>
  </div>
</footer>

1 ... 39 40 41 42 43 ... 335

Search Components

Categories

All Components