Search Components

All Components

Browse all available Tailwind CSS components

Industrial_Charity_Footer

A complex, responsive footer component for non-profit/charity websites, featuring an industrial and raw aesthetic with a retro/vintage color palette. Includes navigation, contact info, social links, and a newsletter signup, with full dark mode support.

Open Preview

                <footer class="bg-gray-200 dark:bg-gray-900 border-t-4 border-amber-600 dark:border-amber-500 py-12 px-4 sm:px-6 lg:px-8 font-sans text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-16">

    <!-- Brand/Mission Statement -->
    <div class="flex flex-col items-start">
      <a href="#" class="flex items-center mb-4">
        <img src="https://picsum.photos/40/40?grayscale" alt="Charity Logo" class="h-10 w-10 mr-3 rounded-full border-2 border-amber-600 dark:border-amber-500 shadow-md">
        <span class="text-2xl font-bold uppercase text-amber-800 dark:text-amber-500 tracking-wide">HopeForge</span>
      </a>
      <p class="text-sm leading-relaxed text-gray-700 dark:text-gray-300 mb-4">
        Forging a brighter future, one community at a time. We empower, we build, we hope.
      </p>
      <div class="flex space-x-4">
        <a href="#" aria-label="Facebook" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 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.33V22c4.781-.75 8.438-4.887 8.438-9.878Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="Twitter" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M20.354 5.383c-.633.313-1.317.525-2.03.626.729-.436 1.282-1.125 1.545-1.944-.683.406-1.432.706-2.22.864C16.924 4.41 15.902 4 14.802 4c-1.921 0-3.483 1.562-3.483 3.484 0 .272.03.535.084.79C7.15 6.742 4.14 5.23 2.067 2.923c-.279.479-.439 1.036-.439 1.637 0 1.205.613 2.28 1.554 2.909-.569-.017-1.104-.173-1.57-.433v.044c0 1.688 1.202 3.092 2.79 3.415-.292.08-.6.124-.91.124-.223 0-.44-.02-.656-.063.442 1.385 1.724 2.395 3.242 2.423-1.192.934-2.69 1.488-4.324 1.488-.28 0-.555-.016-.826-.048C3.125 18.067 5.106 19 7.202 19c6.685 0 10.334-5.536 10.334-10.334 0-.158-.003-.314-.01-.469A7.472 7.472 0 0 0 20.354 5.383Z"/>
          </svg>
        </a>
        <a href="#" aria-label="Instagram" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 4c2.716 0 3.056.012 4.12.06c1.065.048 1.79.213 2.417.464a4.984 4.984 0 0 1 1.772 1.153c.697.697 1.153 1.772 1.153 2.417.251.627.416 1.352.464 2.417.048 1.064.06 1.404.06 4.12 0 2.716-.012 3.056-.06 4.12-.048 1.065-.213 1.79-.464 2.417a4.984 4.984 0 0 1-1.153 1.772c-.697.697-1.772 1.153-2.417 1.153-.627.251-1.352.416-2.417.464-1.064.048-1.404.06-4.12.06S8.944 22 7.88 21.94c-1.065-.048-1.79-.213-2.417-.464a4.984 4.984 0 0 1-1.772-1.153c-.697-.697-1.153-1.772-1.153-2.417-.251-.627-.416-1.352-.464-2.417-.048-1.064-.06-1.404-.06-4.12s.012-3.056.06-4.12c.048-1.065.213-1.79.464-2.417a4.984 4.984 0 0 1 1.153-1.772C4.47 4.697 5.545 4.241 6.19 3.99c.627-.251 1.352-.416 2.417-.464C9.404 3.932 9.744 3.92 12 3.92ZM12 2A10 10 0 1 0 12 22A10 10 0 0 0 12 2Zm0 5a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm6.5-3.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" aria-label="LinkedIn" class="text-gray-600 hover:text-amber-600 dark:text-gray-400 dark:hover:text-amber-500 transition-colors duration-200">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M20.5 2h-17A1.5 1.5 0 0 0 2 3.5v17A1.5 1.5 0 0 0 3.5 22h17a1.5 1.5 0 0 0 1.5-1.5v-17A1.5 1.5 0 0 0 20.5 2ZM8 19V9h4v10H8Zm-2-3a2 2 0 1 1 0-4 2 2 0 0 1 0 4Zm2.5-7A2.5 2.5 0 0 0 8 6.5C8 5.12 9.12 4 10.5 4h10c.83 0 1.5.67 1.5 1.5V19h-4V11a2.5 2.5 0 0 0-2.5-2.5c-1.38 0-2.5 1.12-2.5 2.5v8H8Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Quick Links -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Quick Links</h3>
      <ul class="space-y-3">
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Our Mission</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">What We Do</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Success Stories</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Volunteer</a></li>
        <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200 text-gray-700 dark:text-gray-300 text-sm">Partnerships</a></li>
      </ul>
    </div>

    <!-- Contact Information -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Contact Info</h3>
      <address class="not-italic space-y-3 text-sm text-gray-700 dark:text-gray-300">
        <p class="flex items-start">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 0112 20c-3.473 0-6.417-2.07-7.857-5.003L2 14v-2c0-.552.448-1 1-1h1.586L6.5 9h-2.586A1.5 1.5 0 003 10.5v1.5a1 1 0 01-1 1H.5c-.276 0-.5.224-.5.5v1A.5.5 0 00.5 14h1.996C3.04 17.587 7.03 20 12 20c2.518 0 4.887-.96 6.812-2.71C20.575 15.69 22 13.921 22 12c0-1.854-.627-3.568-1.688-4.912C19.261 5.92 17.5 4 15 4c-.167 0-.329.01-.491.028A8 8 0 0012 4c-4.418 0-8 3.582-8 8s3.582 8 8 8c.706 0 1.4-.07 2.07-.203"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 11a.5.5 0 01-1 0v-.5a.5.5 0 011 0V11zM12 15a.5.5 0 01-1 0v-.5a.5.5 0 011 0V15z"/></svg>
          <span class="flex-1">123 Industrial Way, <br>Retroville, RV 54321</span>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM3 11a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2zM3 17a2 2 0 012-2h14a2 2 0 012 2v2a2 2 0 01-2 2H5a2 2 0 01-2-2v-2z"></path></svg>
          <a href="mailto:[email protected]" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">[email protected]</a>
        </p>
        <p class="flex items-center">
          <svg class="h-5 w-5 mr-3 flex-shrink-0 text-amber-700 dark:text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5.753c0 .894.498 1.696 1.282 2.122l8 4.57c.502.287 1.05.428 1.603.428s1.101-.141 1.603-.428l8-4.57C23.502 7.449 24 6.647 24 5.753V5a.5.5 0 00-.5-.5h-23A.5.5 0 000 5v.753zM21 11.5L12 16.5 3 11.5v6.247c0 .894.502 1.696 1.284 2.123l.716.41V21h16v-1.72l.716-.41c.782-.427 1.284-1.229 1.284-2.123V11.5z"></path></svg>

          <a href="tel:+1 (555) 123-4567" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">+1 (555) 123-4567</a>
        </p>
        <p>
          <a href="#" class="inline-flex items-center text-sm font-semibold text-amber-700 hover:text-amber-600 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 group mt-2">
            Get Directions
            <svg class="ml-2 h-4 w-4 group-hover:translate-x-1 transition-transform duration-200" 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.5 12h-11m0 0l-4 4m4-4l-4-4"></path></svg>
          </a>
        </p>
      </address>
    </div>

    <!-- Newsletter Signup -->
    <div>
      <h3 class="text-lg font-semibold uppercase text-gray-900 dark:text-gray-100 mb-5 relative pb-3 before:absolute before:left-0 before:bottom-0 before:h-1 before:w-10 before:bg-amber-600 dark:before:bg-amber-500">Stay Connected</h3>
      <p class="mb-4 text-gray-700 dark:text-gray-300 text-sm">
        Join our newsletter for impactful updates and ways to contribute.
      </p>
      <form class="flex flex-col sm:flex-row gap-2">
        <input type="email" placeholder="Your Email Address" aria-label="Your Email Address" class="flex-grow min-w-0 px-4 py-2 bg-gray-100 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-amber-600 dark:focus:ring-amber-500 transition-all duration-200">
        <button type="submit" class="px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold rounded-md shadow-md transition-colors duration-200 flex-shrink-0">
          Subscribe
        </button>
      </form>
      <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">
        We respect your privacy. No spam, ever.
      </p>
    </div>

  </div>

  <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center text-sm text-gray-600 dark:text-gray-400">
    <p>&copy; <span id="current-year"></span> HopeForge Charity. All rights reserved. Built with purpose.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Privacy Policy</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Terms of Service</a>
      <span>|</span>
      <a href="#" class="hover:text-amber-600 dark:hover:text-amber-500 transition-colors duration-200">Sitemap</a>
    </div>
  </div>

  <!-- Simple script for current year (No JS requirement for Tailwind, but good for dynamic year) -->
  <script>
    document.getElementById('current-year').textContent = new Date().getFullYear();
  </script>
</footer>

Playful_Manufacturing_Authentication_Component

A playful and cheerful authentication component designed for manufacturing/industrial applications, featuring rounded elements, an analogous color scheme, and full responsiveness with dark mode support.

Open Preview

                <div class="min-h-screen bg-blue-100 flex items-center justify-center p-4 dark:bg-slate-900 overflow-hidden">
  <div class="bg-white rounded-3xl shadow-xl p-8 max-w-sm w-full transform transition-all duration-300 dark:bg-slate-800 sm:max-w-md lg:max-w-xl xl:max-w-2xl sm:p-10 lg:p-12 xl:p-16 relative overflow-hidden">
    
    <!-- Background Blob / Shape -->
    <div class="absolute -top-16 -right-16 w-48 h-48 bg-teal-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse dark:bg-teal-600 lg:w-64 lg:h-64"></div>
    <div class="absolute -bottom-16 -left-16 w-32 h-32 bg-sky-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse animation-delay-700 dark:bg-sky-600 lg:w-48 lg:h-48"></div>
    <div class="absolute top-1/2 left-1/2 -ml-24 -mt-24 w-40 h-40 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 transform animate-pulse animation-delay-1400 dark:bg-indigo-500 lg:w-56 lg:h-56"></div>

    <div class="relative z-10">
      <div class="text-center mb-8">
        <svg class="mx-auto h-16 w-16 text-sky-500 mb-4 dark:text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 21l3.5-3.5L16.25 21l-0.5-4h4.5l-2.5-2.5L21 9.25l-4-0.5V4l-4.5 2.5L9.25 4l-0.5 4h-4.5l2.5 2.5L4 16.25l4-0.5z" />
        </svg>
        <h2 class="text-3xl font-extrabold text-blue-900 mb-2 dark:text-white sm:text-4xl">
          Welcome, Maker!
        </h2>
        <p class="text-gray-600 dark:text-gray-300">
          Let's get this factory humming.
        </p>
      </div>

      <div class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
          <div class="mt-1 relative rounded-lg shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path d="M2.003 5.884L10 11.297l7.997-5.413a1 1 0 00-.775-1.78l-7.222 4.888-7.222-4.888a1 1 0 00-.775 1.78z" />
                <path fill-rule="evenodd" d="M18 8.118V16a2 2 0 01-2 2H4a2 2 0 01-2-2V8.118l8 5.413 8-5.413z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="email" id="email" class="focus:ring-sky-500 focus:border-sky-500 block w-full pl-10 pr-2 py-3 rounded-lg border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400 transition-colors duration-200" placeholder="[email protected]">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Password</label>
          <div class="mt-1 relative rounded-lg shadow-sm">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v2H4a2 2 0 00-2 2v4a2 2 0 002 2h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2V6a4 4 0 00-4-4zm3 8V6a3 3 0 10-6 0v2h6z" clip-rule="evenodd" />
              </svg>
            </div>
            <input type="password" id="password" class="focus:ring-sky-500 focus:border-sky-500 block w-full pl-10 pr-2 py-3 rounded-lg border-gray-300 dark:bg-slate-700 dark:border-slate-600 dark:text-white dark:placeholder-gray-400 transition-colors duration-200" placeholder="Enter your password">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-sky-600 focus:ring-sky-500 border-gray-300 rounded-md dark:border-slate-600 dark:bg-slate-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">
              Remember Me
            </label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300 transition-colors duration-200">
              Forgot Password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-full shadow-sm text-lg font-bold text-white bg-teal-500 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:bg-teal-600 dark:hover:bg-teal-700 dark:focus:ring-teal-600 transition-all duration-300 transform active:scale-95">
            <span class="mr-2">Login</span>
            <svg class="h-6 w-6 transform rotate-90" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4h1V5L8 9" />
            </svg>
          </button>
        </div>

        <div class="relative">
          <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t border-gray-300 dark:border-slate-600"></div>
          </div>
          <div class="relative flex justify-center text-sm">
            <span class="px-2 bg-white text-gray-500 dark:bg-slate-800 dark:text-gray-400">
              Or continue with
            </span>
          </div>
        </div>

        <div class="mt-6 grid grid-cols-2 gap-3">
          <div>
            <button class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200 dark:hover:bg-slate-600 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 0C4.477 0 0 4.477 0 10c0 4.418 2.866 8.169 6.839 9.488.5.088.682-.217.682-.483 0-.237-.007-.866-.012-1.703-2.782.604-3.37-1.34-3.37-1.34-.454-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.004.07 1.532 1.028 1.532 1.028.89 1.527 2.336 1.085 2.9-.652.09-.65-.008-1.085-.015-1.339-2.22-.253-4.555-1.11-4.555-4.943 0-1.09.39-1.984 1.029-2.686-.103-.254-.447-1.272.097-2.659 0 0 .84-.27 2.75 1.025.798-.222 1.643-.333 2.48-.337.836.004 1.682.115 2.48.337 1.91-1.295 2.75-1.025 2.75-1.025.546 1.387.202 2.404.099 2.659.64.702 1.028 1.596 1.028 2.686 0 3.842-2.339 4.686-4.566 4.935.359.308.678.915.678 1.846 0 1.334-.012 2.413-.012 2.748 0 .269.176.575.687.487C17.135 18.165 20 14.417 20 10 20 4.477 15.523 0 10 0z" />
              </svg>
              GitHub
            </button>
          </div>

          <div>
            <button class="w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-full shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-slate-700 dark:border-slate-600 dark:text-gray-200 dark:hover:bg-slate-600 transition-colors duration-200">
              <svg class="h-5 w-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                <path d="M16.59 9.385l.019.25C16.899 15.42 13.916 20 8.796 20c-4.996 0-8.2-3.4-8.2-8a7.808 7.808 0 011.66-5.074l-1.424-1.396C.426 3.195 0 4.544 0 6c0 6.627 5.373 12 12 12 4.415 0 8.125-2.923 8.125-7.6h-3.535zm-2.094-1.417h-1.325V6.78h-1.02v1.188h-1.326v1.019h1.326v1.188h1.02V9.59h1.325V8.293zm-5.748-1.572c-.896 0-1.728-.2-2.302-.547-.584-.351-.876-.84-.876-1.468 0-.616.292-1.096.876-1.432.574-.336 1.406-.528 2.302-.528 1.054 0 1.95.276 2.688.828.738.552 1.107 1.344 1.107 2.376 0 1.012-.37 1.804-1.107 2.376-.738.572-1.634.828-2.688.828zm-.016-.016c.725 0 1.378-.18 1.902-.54.524-.36.786-.864.786-1.512 0-.636-.262-1.144-.786-1.524-.524-.38-.178-.58-.178-.58-.524-.38-1.176-.564-1.952-.564-.789 0-1.442.184-1.952.552-.51.368-.765.864-.765 1.488 0 .684.255 1.188.765 1.512.51.324 1.163.484 1.952.484z" />
              </svg>
              Google
            </button>
          </div>
        </div>

        <p class="text-center text-sm text-gray-600 dark:text-gray-300">
          Don't have an account yet? 
          <a href="#" class="font-medium text-sky-600 hover:text-sky-500 dark:text-sky-400 dark:hover:text-sky-300 transition-colors duration-200">
            Sign up now!
          </a>
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for animation delays if needed, typically handled by Tailwind via postcss */
  .animation-delay-700 {
    animation-delay: 0.7s;
  }
  .animation-delay-1400 {
    animation-delay: 1.4s;
  }
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

Neumorphism Vibrant Site Map Component

A simple, responsive site map component designed with a neumorphic style and a vibrant color scheme, suitable for documentation or wiki sites. Includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl p-6 sm:p-10 transition-all duration-300 ease-in-out
              dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),2px_2px_8px_rgba(0,0,0,0.4),-2px_-2px_8px_rgba(40,40,40,0.4)]
              shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,250,0.7),2px_2px_8px_rgba(150,150,250,0.3),-2px_-2px_8px_rgba(255,255,255,0.8)]">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-indigo-700 dark:text-purple-400 mb-8 sm:mb-12 text-center drop-shadow-lg">
      Site Map
    </h2>

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

      <!-- Category 1: Getting Started -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Getting Started</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Installation Guide</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Quick Start Tutorial</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Frequently Asked Questions</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">System Requirements</a></li>
        </ul>
      </div>

      <!-- Category 2: Core Concepts -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Core Concepts</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Data Models</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Endpoints</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Authentication</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Error Handling</a></li>
        </ul>
      </div>

      <!-- Category 3: Advanced Topics -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Advanced Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Custom Integrations</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Performance Optimization</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Security Best Practices</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Migration Guides</a></li>
        </ul>
      </div>

      <!-- Category 4: Resources -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">API Reference</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Glossary of Terms</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Community Forum</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Support & Contact</a></li>
        </ul>
      </div>

      <!-- Category 5: Release Notes -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Release Notes</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Latest Version</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Previous Versions</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Upcoming Features</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Bug Fixes</a></li>
        </ul>
      </div>

      <!-- Category 6: Legal & Compliance -->
      <div class="p-5 rounded-2xl transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800
                  shadow-[5px_5px_10px_rgba(150,150,250,0.2),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(40,40,40,0.4)]
                  hover:shadow-[inset_2px_2px_5px_rgba(150,150,250,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                  dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(30,30,30,0.5)]">
        <h3 class="text-xl font-bold text-indigo-600 dark:text-purple-300 mb-4">Legal & Compliance</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Terms of Service</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Privacy Policy</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">Cookie Policy</a></li>
          <li><a href="#" class="text-indigo-800 dark:text-silver-200 hover:text-indigo-500 dark:hover:text-purple-200 transition-colors duration-200 block truncate">DMCA Policy</a></li>
        </ul>
      </div>

    </div>

  </div>
</div>

Luxury Tag Cloud Component

An elegant and responsive tag cloud component designed for professional consulting services, featuring a luxury/premium aesthetic with sunset/warm color tones and dark mode support.

Open Preview

                <div class="font-sans bg-amber-50 dark:bg-gray-900 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-amber-900 dark:text-amber-200 mb-4 tracking-tight leading-tight">
        Our Expertise: A World of Insights
      </h2>
      <p class="text-xl text-amber-700 dark:text-amber-300 max-w-2xl mx-auto">
        Discover the breadth of our consulting services and the diverse areas where we bring unparalleled value and strategic guidance.
      </p>
    </div>

    <div class="flex flex-wrap justify-center gap-4 sm:gap-6 lg:gap-8 p-6 sm:p-8 lg:p-10 bg-gradient-to-br from-amber-100 to-red-100 dark:from-red-900 dark:to-orange-950 rounded-3xl shadow-xl border border-amber-200 dark:border-red-800">

      <span class="tag-item">
        Strategic Planning
      </span>
      <span class="tag-item">
        Digital Transformation
      </span>
      <span class="tag-item">
        Organizational Change
      </span>
      <span class="tag-item">
        Market Entry
      </span>
      <span class="tag-item">
        Financial Advisory
      </span>
      <span class="tag-item">
        Operational Efficiency
      </span>
      <span class="tag-item">
        Sustainability Consulting
      </span>
      <span class="tag-item">
        Leadership Development
      </span>
      <span class="tag-item">
        Risk Management
      </span>
      <span class="tag-item">
        Technology Integration
      </span>
      <span class="tag-item">
        Customer Experience
      </span>
      <span class="tag-item">
        Crisis Management
      </span>
      <span class="tag-item">
        Innovation Strategy
      </span>
      <span class="tag-item">
        Supply Chain Optimization
      </span>
      <span class="tag-item">
        Data Analytics
      </span>
      <span class="tag-item">
        Talent Management
      </span>
      <span class="tag-item">
        Mergers & Acquisitions
      </span>
      <span class="tag-item">
        Brand Development
      </span>
      <span class="tag-item">
        Cybersecurity
      </span>
      <span class="tag-item">
        Regulatory Compliance
      </span>
      <span class="tag-item">
        Performance Improvement
      </span>
      <span class="tag-item">
        Global Business
      </span>
      <span class="tag-item">
        Executive Coaching
      </span>
    </div>

    <div class="text-center mt-12">
      <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-full shadow-lg text-white bg-gradient-to-r from-red-600 to-orange-500 hover:from-red-700 hover:to-orange-600 dark:from-red-700 dark:to-orange-600 dark:hover:from-red-800 dark:hover:to-orange-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900">
        Explore Our Full Services
        <svg class="ml-3 -mr-1 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="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
          <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

<style>
  /* Base styles for the tag item */
  .tag-item {
    @apply inline-flex items-center justify-center
    px-5 py-2.5 sm:px-6 sm:py-3 lg:px-7 lg:py-3.5
    text-base sm:text-lg lg:text-xl font-semibold
    rounded-full
    transition-all duration-300 ease-in-out
    transform hover:-translate-y-0.5 hover:scale-105
    shadow-md
  }
  
  /* Light mode specific styles */
  .tag-item {
    @apply bg-amber-500 text-white
    border border-amber-600
    hover:bg-amber-600 hover:text-white
    hover:shadow-lg
  }

  /* Dark mode specific styles */
  .dark .tag-item {
    @apply bg-red-700 text-amber-100
    border border-red-800
    hover:bg-red-800 hover:text-white
    hover:shadow-lg
  }

  /* Responsive font sizes and padding for tags */
  @media (min-width: 640px) {
    .tag-item:nth-child(2n) { /* Example: Slightly larger for some tags */
      @apply text-lg sm:text-xl lg:text-2xl px-6 py-3 sm:px-7 sm:py-3.5 lg:px-8 lg:py-4;
      @apply bg-orange-500 border-orange-600 hover:bg-orange-600;
      @apply dark:bg-orange-700 dark:border-orange-800 dark:hover:bg-orange-800;
    }
  }

  @media (min-width: 1024px) {
    .tag-item:nth-child(3n) { /* Example: Even larger and different hue for others */
      @apply text-xl sm:text-2xl lg:text-3xl px-7 py-3.5 sm:px-8 sm:py-4 lg:px-9 lg:py-4.5;
      @apply bg-red-500 border-red-600 hover:bg-red-600;
      @apply dark:bg-red-700 dark:border-red-800 dark:hover:bg-red-800;
    }
  }

  /* Add more specific sizing for tags for visual variety if needed */
  .tag-item:nth-child(4n+1) { @apply text-base; }
  .tag-item:nth-child(4n+2) { @apply text-lg; }
  .tag-item:nth-child(4n+3) { @apply text-xl; }
  .tag-item:nth-child(4n) { @apply text-2xl; }

  /* Adjust font sizes responsively */
  @media (max-width: 639px) {
    .tag-item:nth-child(4n+1) { @apply text-sm; }
    .tag-item:nth-child(4n+2) { @apply text-base; }
    .tag-item:nth-child(4n+3) { @apply text-base; }
    .tag-item:nth-child(4n) { @apply text-lg; }
  }
</style>

Glassmorphism User Profiles Component (Simple)

A simple, responsive user profile component with a glassmorphism design style, pastel color scheme, and dark mode support. Ideal for entertainment/media platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl backdrop-blur-md bg-white/30 dark:bg-gray-800/30 border border-white/50 dark:border-gray-700/50 relative overflow-hidden">
    
    <!-- Background Blur Effect (for glassmorphism) -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-20">
      <div class="absolute top-0 left-0 w-32 h-32 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob dark:animate-blob-dark"></div>
      <div class="absolute top-0 right-0 w-32 h-32 bg-pink-300 dark:bg-pink-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 dark:animate-blob-dark dark:animation-delay-2000"></div>
      <div class="absolute bottom-0 left-1/2 w-32 h-32 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000 dark:animate-blob-dark dark:animation-delay-4000"></div>
    </div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <img class="w-24 h-24 rounded-full border-4 border-white/70 dark:border-gray-600/70 shadow-lg object-cover mb-4"
        src="https://randomuser.me/api/portraits/women/68.jpg"
        alt="User Avatar">

      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1 tracking-wide">
        Alice Johnson
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4 font-medium">
        Premium User
      </p>

      <div class="flex space-x-6 mb-6">
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">1.2K</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Followers</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">500</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Following</span>
        </div>
        <div class="flex flex-col items-center">
          <span class="text-lg font-semibold text-gray-800 dark:text-white">25</span>
          <span class="text-xs text-gray-500 dark:text-gray-400">Playlists</span>
        </div>
      </div>

      <button class="w-full py-3 px-6 rounded-xl bg-gradient-to-r from-purple-400 to-pink-400 dark:from-purple-600 dark:to-pink-600 
                     text-white font-semibold text-lg shadow-md 
                     hover:from-purple-500 hover:to-pink-500 dark:hover:from-purple-700 dark:hover:to-pink-700 
                     focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-300 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-700/50 
                     transition-all duration-300 transform hover:-translate-y-0.5">
        View Profile
      </button>
    </div>
  </div>
</div>

<!-- To make the background blobs animate, you'd typically add a CSS @keyframes in a <style> tag or global CSS. For Tailwind, you can extend the config. -->
<!-- Example for tailwind.config.js (not part of the HTML output, but for context): -->
<!--
  theme: {
    extend: {
      keyframes: {
        blob: {
          '0%, 100%': {
            transform: 'translate(0px, 0px) scale(1)'
          },
          '33%': {
            transform: 'translate(30px, -50px) scale(1.1)'
          },
          '66%': {
            transform: 'translate(-20px, 20px) scale(0.9)'
          }
        }
      },
      animation: {
        blob: 'blob 7s infinite ease-in-out',
        'blob-dark': 'blob 10s infinite ease-in-out'
      }
    }
  }
-->

Neon_Glow_Timeline_Agriculture

A complex, responsive timeline component with neon/glow effects and jewel tones, tailored for agriculture/farming websites. Features rich visual elements and dark mode support.

Open Preview

                <div class="font-sans antialiased text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-50 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-16 relative
      text-emerald-500 dark:text-emerald-400
      after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2 after:w-24 after:h-1.5 
      after:rounded-full after:bg-emerald-500 after:shadow-glow-emerald
      transition-colors duration-300">
      Harvesting Milestones
    </h2>

    <div class="relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:ml-[unset] md:before:translate-x-0 
      before:h-full before:w-px before:bg-emerald-300 before:dark:bg-emerald-700 before:shadow-timeline-emerald
      md:before:mx-auto md:before:left-auto md:before:right-auto md:before:w-0.5 
      dark:text-gray-100">

      <!-- Timeline Item 1 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-sapphire-600 dark:text-sapphire-300">Q1 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Jan - Mar</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-emerald-200/50 dark:shadow-emerald-900/50 
            hover:shadow-emerald-400/70 hover:dark:shadow-emerald-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-emerald-500 before:shadow-glow-emerald before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-emerald-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Soil Preparation & Planting</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Successfully completed soil analysis, enrichment, and initial planting of drought-resistant corn varieties across 500 acres. Leveraged smart irrigation systems to optimize water usage.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.664 12H2A1 1 0 001 13v3a1 1 0 001 1h7.664a1 1 0 00-.664.236l-3.332 3.332a.5.5 0 00.354.854h6.664a.5.5 0 00.354-.854L10 12.236A1 1 0 009.664 12zM12 8V2A1 1 0 0011 1H4a1 1 0 00-1 1v6a1 1 0 001 1h7a1 1 0 001-1z" clip-rule="evenodd"></path></svg> 500 acres</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 002 14v3a1 1 0 001 1h14a1 1 0 001-1v-3a1 1 0 00-.293-.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 1 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg> Smart Irrigation</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-emerald-300 dark:border-emerald-700 shadow-md" src="https://picsum.photos/400/250?random=1" alt="Soil Preparation">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-ruby-600 dark:text-ruby-300">Q2 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Apr - Jun</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-ruby-200/50 dark:shadow-ruby-900/50 
            hover:shadow-ruby-400/70 hover:dark:shadow-ruby-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-ruby-500 dark:hover:border-ruby-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-ruby-500 before:shadow-glow-ruby before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-ruby-600 dark:text-ruby-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-ruby-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Growth Monitoring & Pest Control</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Implemented drone surveillance for crop health monitoring. Successfully mitigated a localized pest outbreak through organic treatments, ensuring minimal crop damage.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-ruby-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg> Drone Surveillance</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-ruby-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M.93 2.25c-.244-.249-.074-.5.251-.5h18.298c.325 0 .495.251.251.5L12 9.27L9.932 7.21C9.658 6.937 9.191 6.937 8.917 7.21L.93 2.25zM2.872 3.128l7.07 7.07c.273.273.74.273 1.013 0l7.07-7.07L18.4 4c.244.249.074.5-.251.5h-18.298c-.325 0-.495-.251-.251-.5L2.872 3.128z" clip-rule="evenodd" /></svg> Organic Control</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-ruby-300 dark:border-ruby-700 shadow-md" src="https://picsum.photos/400/250?random=2" alt="Crop Growth Monitoring">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse mb-12">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-emerald-600 dark:text-emerald-300">Q3 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Jul - Sep</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-emerald-200/50 dark:shadow-emerald-900/50 
            hover:shadow-emerald-400/70 hover:dark:shadow-emerald-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-emerald-500 dark:hover:border-emerald-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-emerald-500 before:shadow-glow-emerald before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-emerald-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Harvest & Yield Optimization</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Achieved record yields for corn crops, exceeding projections by 15%. Utilized predictive analytics to optimize harvest timing and reduce post-harvest losses.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M8.433 7.82c.071-.05.13-.11.18-.17l.797-.97.234-.285a.75.75 0 011.085-.145l2.456 2.06c.21.176.326.435.326.702v7.24a.75.75 0 01-.75.75h-3.352c-.52 0-2.3-1.07-2.3-1.07l-.76-.796a.75.75 0 01-.137-.996L8.433 7.82z" clip-rule="evenodd"></path></svg> 15% Over Projection</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.162A9.776 9.776 0 0112 11c1.545 0 3.067.14 4.535.462 2.378.508 3.322 1.83 3.425 2.126.1.296.068.513-.08.684a.75.75 0 01-.58.268H.705a.75.75 0 01-.58-.268c-.148-.171-.18-.388-.08-.684.103-.296 1.047-1.618 3.425-2.126z"></path></svg> AI Analytics</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-emerald-300 dark:border-emerald-700 shadow-md" src="https://picsum.photos/400/250?random=3" alt="Modern Farming Tools">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="flex flex-col md:flex-row items-start md:items-center w-full md:w-1/2 md:even:text-right md:pr-8 md:even:pl-8">
          <div class="order-2 md:order-1 min-w-[7rem] text-center text-xs sm:text-sm md:text-base mb-2 md:mb-0">
            <p class="font-semibold text-sapphire-600 dark:text-sapphire-300">Q4 2023</p>
            <p class="text-gray-500 dark:text-gray-400">Oct - Dec</p>
          </div>
          <div class="order-1 md:order-2 w-full md:w-auto p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg 
            shadow-sapphire-200/50 dark:shadow-sapphire-900/50 
            hover:shadow-sapphire-400/70 hover:dark:shadow-sapphire-700/70 
            transition-all duration-300 origin-bottom md:even:origin-bottom-right md:odd:origin-bottom-left
            border-2 border-transparent hover:border-sapphire-500 dark:hover:border-sapphire-600
            relative 
            before:absolute before:w-4 before:h-4 before:bg-sapphire-500 before:shadow-glow-sapphire before:rounded-full before:-left-9 before:top-1/2 before:-translate-y-1/2 md:before:hidden 
            after:absolute after:hidden md:after:block after:w-0 after:h-0 
            after:border-t-[10px] after:border-t-transparent after:border-b-[10px] after:border-b-transparent 
            md:after:-right-[22px] md:even:after:-left-[22px] after:top-1/2 after:-translate-y-1/2
            after:border-l-[12px] after:border-l-gray-100 dark:after:border-l-gray-800
            md:even:after:border-l-0 md:even:after:border-r-[12px] md:even:after:border-r-gray-100 dark:md:even:after:border-r-gray-800
            group-hover:scale-[1.01] group-hover:z-10">
            <h3 class="text-xl font-bold text-sapphire-600 dark:text-sapphire-400 mb-2
              relative inline-block after:block after:absolute after:left-0 after:bottom-[-2px] after:w-full after:h-0.5 after:bg-sapphire-400 after:scale-x-0 group-hover:after:scale-x-100 after:transition-transform after:duration-300">
              Post-Harvest & Soil Regeneration</h3>
            <p class="text-gray-600 dark:text-gray-300 leading-relaxed max-w-lg">
              Successful implementation of cover cropping and natural composting to regenerate soil health for next season. Engaged with local university for research on sustainable practices.
            </p>
            <div class="mt-4 flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-sapphire-500" fill="currentColor" viewBox="0 0 20 20"><path d="M12 2H8a.5.5 0 00-.5.5v2.879l-1.379-1.379a.5.5 0 00-.707.707l2 2a.5.5 0 00.707 0l2-2a.5.5 0 00-.707-.707L8.5 5.379V2.5A.5.5 0 008 2h4zM16 8h-3V7a1 1 0 00-1-1h-4a1 1 0 00-1 1v1H4a2 2 0 00-2 2v6a2 2 0 002 2h12a2 2 0 002-2v-6a2 2 0 00-2-2zm-3 8H6v-3a1 1 0 011-1h6a1 1 0 011 1v3z" clip-rule="evenodd"></path></svg> Soil Regeneration</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-sapphire-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 8a3 3 0 100-6 3 3 0 000 6zM3.465 14.162A9.776 9.776 0 0112 11c1.545 0 3.067.14 4.535.462 2.378.508 3.322 1.83 3.425 2.126.1.296.068.513-.08.684a.75.75 0 01-.58.268H.705a.75.75 0 01-.58-.268c-.148-.171-.18-.388-.08-.684.103-.296 1.047-1.618 3.425-2.126z"></path></svg> Research Partner</span>
            </div>
            <img class="w-full h-32 object-cover rounded mt-4 border border-sapphire-300 dark:border-sapphire-700 shadow-md" src="https://picsum.photos/400/250?random=4" alt="Soil Regeneration">
          </div>
        </div>
        <div class="absolute left-1/2 -translate-x-1/2 w-4 h-4 bg-sapphire-500 shadow-glow-sapphire rounded-full z-10 hidden md:block"></div>
      </div>

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

<style>
  /* Custom glow effect utility classes */
  .shadow-glow-emerald {
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6), 0 0 16px rgba(16, 185, 129, 0.4),
                0 0 24px rgba(16, 185, 129, 0.2);
  }
  .dark .shadow-glow-emerald {
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6), 0 0 16px rgba(52, 211, 153, 0.4),
                0 0 24px rgba(52, 211, 153, 0.2);
  }
  .shadow-glow-sapphire {
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.6), 0 0 16px rgba(37, 99, 235, 0.4),
                0 0 24px rgba(37, 99, 235, 0.2);
  }
  .dark .shadow-glow-sapphire {
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.6), 0 0 16px rgba(96, 165, 250, 0.4),
                0 0 24px rgba(96, 165, 250, 0.2);
  }
  .shadow-glow-ruby {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 16px rgba(239, 68, 68, 0.4),
                0 0 24px rgba(239, 68, 68, 0.2);
  }
  .dark .shadow-glow-ruby {
    box-shadow: 0 0 8px rgba(252, 165, 165, 0.6), 0 0 16px rgba(252, 165, 165, 0.4),
                0 0 24px rgba(252, 165, 165, 0.2);
  }

  .shadow-timeline-emerald {
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5), 0 0 8px rgba(16, 185, 129, 0.3);
  }
  .dark .shadow-timeline-emerald {
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.5), 0 0 8px rgba(52, 211, 153, 0.3);
  }

  /* Custom utility classes for Jewel Tones */
  .text-emerald-500 { color: #10B981; } /* Base Emerald */
  .dark .text-emerald-400 { color: #34D399; } /* Dark Mode Emerald */
  .text-emerald-600 { color: #059669; } /* Darker Emerald */
  .dark .text-emerald-300 { color: #6EE7B7; } /* Lighter Emerald for dark text */
  .border-emerald-300 { border-color: #6EE7B7; } /* Light Emerald for borders */
  .dark .border-emerald-700 { border-color: #047857; } /* Dark Emerald for borders */

  .text-sapphire-500 { color: #3B82F6; } /* Base Sapphire (Blue) */
  .dark .text-sapphire-400 { color: #60A5FA; } /* Dark Mode Sapphire */
  .text-sapphire-600 { color: #2563EB; } /* Darker Sapphire */
  .dark .text-sapphire-300 { color: #93C5FD; } /* Lighter Sapphire for dark text */
  .border-sapphire-300 { border-color: #93C5FD; } /* Light Sapphire for borders */
  .dark .border-sapphire-700 { border-color: #1D4ED8; } /* Dark Sapphire for borders */

  .text-ruby-500 { color: #EF4444; } /* Base Ruby (Red) */
  .dark .text-ruby-400 { color: #F87171; } /* Dark Mode Ruby */
  .text-ruby-600 { color: #DC2626; } /* Darker Ruby */
  .dark .text-ruby-300 { color: #FCA5A5; } /* Lighter Ruby for dark text */
  .border-ruby-300 { border-color: #FCA5A5; } /* Light Ruby for borders */
  .dark .border-ruby-700 { border-color: #B91C1C; } /* Dark Ruby for borders */

  /* Custom media query for md breakpoint to control timeline element positioning */
  @media (min-width: 768px) {
    .md\:before\:ml-\[unset\] {
      margin-left: unset;
    }
    .md\:before\:translate-x-0 {
      transform: translateX(0);
    }
    .md\:before\:mx-auto {
      margin-left: auto;
      margin-right: auto;
    }
    .md\:before\:left-auto {
      left: auto;
    }
    .md\:before\:right-auto {
      right: auto;
    }
    .md\:before\:w-0\.5 {
      width: 2px;
    }
    .md\:even\:flex-row-reverse {
      flex-direction: row-reverse;
    }
    .md\:pr-8 {
      padding-right: 2rem;
    }
    .md\:even\:pl-8 {
      padding-left: 2rem;
    }
    .md\:before\:hidden {
      display: none;
    }
    .md\:after\:block {
      display: block;
    }
    .md\:after\:-right-\[22px\] {
      right: -22px;
    }
    .md\:even\:after\:-left-\[22px\] {
      left: -22px;
      right: unset;
    }
    .md\:after\:border-l-\[12px\] {
      border-left-width: 12px;
    }
    .md\:even\:after\:border-l-0 {
      border-left-width: 0px;
    }
    .md\:even\:after\:border-r-\[12px\] {
      border-right-width: 12px;
    }
  }
</style>

Product Gallery Component

A complex, responsive product gallery component designed with subtle microinteractions, pastel color scheme, and full dark mode support, suitable for a forum or community platform. Features interactive image selection and detailed product information.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="lg:grid lg:grid-cols-2 lg:gap-8 p-4 sm:p-6 lg:p-8">

      <!-- Image Gallery Section -->
      <div class="flex flex-col-reverse lg:flex-row gap-4">
        <!-- Thumbnail Navigation -->
        <div class="flex lg:flex-col gap-3 overflow-x-auto lg:overflow-y-auto pb-2 lg:pb-0 scrollbar-hide">
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-indigo-200 dark:border-indigo-600 ring-2 ring-indigo-300 dark:ring-indigo-500 cursor-pointer transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md">
            <img src="https://picsum.photos/id/1018/200/200" alt="Product thumbnail 1" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1025/200/200" alt="Product thumbnail 2" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1080/200/200" alt="Product thumbnail 3" class="w-full h-full object-cover">
          </div>
          <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg overflow-hidden border-2 border-transparent hover:border-indigo-200 dark:hover:border-indigo-600 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md cursor-pointer">
            <img src="https://picsum.photos/id/1043/200/200" alt="Product thumbnail 4" class="w-full h-full object-cover">
          </div>
        </div>

        <!-- Main Image -->
        <div class="flex-1 rounded-xl overflow-hidden shadow-lg border border-indigo-100 dark:border-gray-700 aspect-video lg:aspect-square flex items-center justify-center">
          <img src="https://picsum.photos/id/1018/600/600" alt="Main product image" class="w-full h-full object-cover object-center transform transition-transform duration-300 hover:scale-105">
        </div>
      </div>

      <!-- Product Details Section -->
      <div class="mt-8 lg:mt-0">
        <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-3 tracking-tight leading-tight">
          Pastel Dream Headphones
        </h1>
        <p class="text-2xl font-semibold text-indigo-600 dark:text-indigo-400 mb-6">
          $199.99
        </p>

        <div class="mb-8">
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Description</h2>
          <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
            Experience pure audio bliss with the Pastel Dream Headphones. Designed for comfort and style, these over-ear headphones deliver rich, balanced sound with deep bass and clear trebles. Perfect for music lovers and podcast enthusiasts.
          </p>
        </div>

        <!-- Product Attributes/Features -->
        <div class="mb-8 grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-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.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 12.728l-.707-.707M6 18H4a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v9a2 2 0 01-2 2h-2M18 9a2 2 0 01-2 2H8a2 2 0 01-2-2V5h12v4z"></path>
            </svg>
            <span class="font-medium text-lg">Wireless Connectivity</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:scale-110" 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="font-medium text-lg">20-Hour Battery Life</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:translate-x-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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
            <span class="font-medium text-lg">Noise Cancellation</span>
          </div>
          <div class="flex items-center text-gray-700 dark:text-gray-300 group">
            <svg class="w-6 h-6 text-indigo-400 group-hover:text-indigo-500 mr-2 transform transition-transform duration-200 group-hover:rotate-12" 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="M14.752 11.168l-3.197 2.132A6.5 6.5 0 0012 21a6.5 6.5 0 00-4.06-11.832c.983-4.004 4.544-7 8.56-7s7.577 2.996 8.56 7A6.5 6.5 0 0012 3a6.5 6.5 0 00-4.06 11.832z"></path>
            </svg>
            <span class="font-medium text-lg">Comfort-Fit Design</span>
          </div>
        </div>

        <!-- Add to Cart (Placeholder for Forum/Community interaction) -->
        <div class="flex flex-col sm:flex-row gap-4 mb-8">
          <button class="flex-1 py-3 px-6 rounded-xl bg-indigo-500 text-white font-semibold text-lg shadow-md hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 transition-all duration-200 transform active:scale-95 hover:scale-105">
            <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1 animate-pulse" 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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg> Join Discussion</span>
          </button>
          <button class="flex-1 py-3 px-6 rounded-xl bg-pink-200 text-pink-700 dark:bg-pink-700 dark:text-pink-100 font-semibold text-lg shadow-md hover:bg-pink-300 dark:hover:bg-pink-600 focus:outline-none focus:ring-4 focus:ring-pink-100 dark:focus:ring-pink-800 transition-all duration-200 transform active:scale-95 hover:scale-105">
             <span class="flex items-center justify-center"><svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> Add to Wishlist</span>
          </button>
        </div>

        <!-- Customer Reviews/Community Testimonial (Forum Focus) -->
        <div>
          <h2 class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-3">What Our Community Says:</h2>
          <div class="flex items-start bg-purple-50 dark:bg-gray-700 p-4 rounded-lg shadow-sm group hover:shadow-md transition-all duration-200">
            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-300 dark:ring-purple-600 mr-4 flex-shrink-0 transform transition-transform duration-300 group-hover:scale-110">
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-100">~ MusicLover22</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">"Absolutely stunning! The sound quality is phenomenal, and they're so comfortable for long listening sessions. Plus, the pastel colors are just adorable!"</p>
              <div class="flex text-yellow-500 text-sm mt-1">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.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.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              </div>
            </div>
          </div>
        </div>

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

Mega Menu Component - Memphis Earth Tones Food/Restaurant

A responsive mega menu component for food/restaurant websites, inspired by Memphis design with earth tones. Features bold colors, geometric shapes, and playful patterns. Includes dark mode support.

Open Preview

                <nav class="bg-amber-100 dark:bg-stone-900 border-b-4 border-amber-300 dark:border-stone-700 font-sans">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <a href="#" class="text-stone-800 dark:text-stone-100 text-3xl font-extrabold tracking-tight relative">
      <span class="block absolute -top-1 -left-1 w-6 h-6 bg-lime-400 dark:bg-lime-600 transform rotate-45"></span>
      <span class="block relative z-10">FoodieHub</span>
    </a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Home</a>
      <div class="relative group">
        <button class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300 focus:outline-none">Menu <svg class="w-4 h-4 ml-1 inline-block transform group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg></button>
        <div class="absolute left-1/2 -translate-x-1/2 mt-4 w-[600px] p-6 bg-lime-50 dark:bg-stone-800 rounded-xl shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 ease-in-out transform scale-95 group-hover:scale-100 border-4 border-lime-300 dark:border-stone-700 grid grid-cols-2 gap-6" style="clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(50% + 5px) calc(100% - 10px), 50% 100%, calc(50% - 5px) calc(100% - 10px), 0 calc(100% - 10px));">
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-orange-400 dark:bg-orange-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">🍴</span> Popular Categories
            </h3>
            <ul class="space-y-3">
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Pizzas & Pasta</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Burgers & Sandwiches</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Asian Delights</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Healthy Options</a></li>
              <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200 font-medium relative hover:pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-orange-400 dark:before:bg-orange-600 before:scale-0 hover:before:scale-100 before:transition-all before:duration-200">Desserts & Drinks</a></li>
            </ul>
          </div>
          <div>
            <h3 class="font-bold text-xl text-stone-800 dark:text-stone-100 mb-4 flex items-center">
              <span class="bg-purple-400 dark:bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-2 text-sm">✨</span> Today's Specials
            </h3>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=1" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Spicy Beef Tacos</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Authentic Mexican flavor, limited time!</p>
              </div>
            </a>
            <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-3 rounded-lg flex items-center space-x-3 group mt-3 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
              <img src="https://picsum.photos/60/60?random=2" alt="Special Dish" class="rounded-md object-cover border-2 border-lime-300 dark:border-stone-500">
              <div>
                <p class="font-semibold text-stone-800 dark:text-stone-100 group-hover:text-orange-600 dark:group-hover:text-orange-400">Creamy Garlic Pasta</p>
                <p class="text-sm text-stone-600 dark:text-stone-400">Vegetarian option, rich and delightful.</p>
              </div>
            </a>
            <div class="mt-4 flex justify-center">
                <button class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-sm transform hover:scale-105 active:scale-95 relative overflow-hidden group">
                    <span class="absolute top-0 left-0 w-full h-full bg-orange-600 dark:bg-orange-700 transform scale-x-0 origin-right transition-transform duration-300 group-hover:scale-x-100 group-hover:origin-left"></span>
                    <span class="relative z-10">View All Specials</span>
                </button>
            </div>
          </div>
        </div>
      </div>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">About Us</a>
      <a href="#" class="text-stone-700 dark:text-stone-200 hover:text-orange-600 dark:hover:text-orange-400 font-semibold text-lg transition-colors duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
        <button class="p-2 rounded-full hidden md:inline-block bg-lime-200 dark:bg-stone-700 hover:bg-lime-300 dark:hover:bg-stone-600 transition-colors duration-200 shadow-sm">
            <svg class="w-6 h-6 text-stone-700 dark:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        </button>
        <button id="mobile-menu-button" class="md:hidden hamburger p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
          <span class="hamburger-line block w-6 h-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
          <span class="hamburger-line block w-6 h-1 mt-1 bg-stone-700 dark:bg-stone-200 transform transition duration-300 ease-in-out"></span>
        </button>
    </div>
  </div>

  <div id="mobile-menu" class="mobile-menu md:hidden fixed inset-0 bg-amber-100 dark:bg-stone-900 transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto pt-20">
    <div class="p-4 flex flex-col space-y-4">
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Home</a>
      <div class="relative">
        <button class="w-full text-left py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 flex justify-between items-center transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400" onclick="this.nextElementSibling.classList.toggle('hidden'); this.querySelector('svg').classList.toggle('rotate-180')">
          Menu
          <svg class="w-5 h-5 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
        </button>
        <div class="hidden mt-4 p-4 bg-lime-50 dark:bg-stone-800 rounded-lg shadow-inner border-2 border-lime-300 dark:border-stone-700">
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mb-3 border-orange-300 dark:border-orange-500">Popular Categories</h4>
          <ul class="space-y-2">
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Pizzas & Pasta</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Burgers & Sandwiches</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Asian Delights</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Healthy Options</a></li>
            <li><a href="#" class="block text-stone-700 dark:text-stone-300 hover:text-orange-600 dark:hover:text-orange-400 transition-colors duration-200">Desserts & Drinks</a></li>
          </ul>
          <h4 class="font-bold text-lg text-stone-800 dark:text-stone-100 border-b pb-2 mt-6 mb-3 border-purple-300 dark:border-purple-500">Today's Specials</h4>
          <a href="#" class="block bg-lime-100 dark:bg-stone-700 p-2 rounded-md flex items-center space-x-2 mt-2 hover:bg-lime-200 dark:hover:bg-stone-600 transition-colors duration-200">
            <img src="https://picsum.photos/50/50?random=3" alt="Special Dish" class="rounded-sm object-cover">
            <div>
              <p class="font-semibold text-stone-800 dark:text-stone-100 text-sm">Cheesy Garlic Bread</p>
              <p class="text-xs text-stone-600 dark:text-stone-400">Perfect appetizer!</p>
            </div>
          </a>
        </div>
      </div>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">About Us</a>
      <a href="#" class="block py-3 text-stone-800 dark:text-stone-100 text-xl font-semibold border-b border-lime-300 dark:border-stone-700 transition-colors duration-200 hover:text-orange-600 dark:hover:text-orange-400">Contact</a>
      <button class="px-4 py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition-all duration-300 text-lg transform hover:scale-105 active:scale-95 mt-4">
        <svg class="w-6 h-6 inline-block 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Your Cart
      </button>
    </div>
    <button id="close-mobile-menu" class="absolute top-4 right-4 p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-400 dark:focus:ring-purple-400">
        <svg class="w-8 h-8 text-stone-700 dark:text-stone-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
  </div>
</nav>

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

    function toggleMobileMenu() {
      mobileMenu.classList.toggle('translate-x-full');
      mobileMenuButton.classList.toggle('open'); // For hamburger icon animation
    }

    mobileMenuButton.addEventListener('click', toggleMobileMenu);
    closeMobileMenuButton.addEventListener('click', toggleMobileMenu);

    // Close menu when clicking outside (optional)
    // document.addEventListener('click', function(event) {
    //   if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target) && !mobileMenu.classList.contains('translate-x-full')) {
    //     toggleMobileMenu();
    //   }
    // });

    // Hamburger animation (CSS only for transform, JS to toggle class)
    const style = document.createElement('style');
    style.innerHTML = `
      .hamburger-line:nth-child(1) { transform-origin: top left; }
      .hamburger-line:nth-child(3) { transform-origin: bottom left; }

      .hamburger.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 0px); }
      .hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
      .hamburger.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, 1px); }
    `;
    document.head.appendChild(style);
  });
</script>

User Profiles Component

A complex, 3D-inspired user profile component designed for booking/reservation systems, featuring cool neutrals, responsiveness, and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Profile Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Jane Doe</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Senior Stylist</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Highly experienced stylist specializing in modern cuts and vibrant color treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>5 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Certified</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <!-- 3D effect layers -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">John Smith</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Master Barber</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Dedicated master barber with a keen eye for classic and contemporary men's grooming.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>8 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Awarded</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Emily White</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Esthetician</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Expert esthetician, passionate about skincare and providing rejuvenating facial treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>3 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Licensed</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

  </div>
</div>

360_viewer_component_sports_grayscale

A simple, responsive 360° viewer component for sports/fitness applications, featuring a watercolor/artistic style with a grayscale color scheme and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-4xl bg-white dark:bg-gray-700 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105 p-6 sm:p-8 md:p-10">
    <!-- Artistic Overlay Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <div class="absolute top-0 left-0 w-2/3 h-2/3 bg-gray-400 dark:bg-gray-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform -translate-x-1/4 -translate-y-1/4"></div>
      <div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-gray-300 dark:bg-gray-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform translate-x-1/4 translate-y-1/4"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 text-gray-800 dark:text-gray-100 leading-tight">
        <span class="block">Athlete 360° View</span>
        <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-300">Deep Dive into Performance</span>
      </h2>
      <p class="mb-8 text-gray-600 dark:text-gray-300 text-sm sm:text-base max-w-2xl mx-auto">
        Explore every angle of their technique and form. Pinch, drag, and zoom for an immersive experience.
      </p>

      <div class="relative w-full aspect-video bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden shadow-inner border border-gray-300 dark:border-gray-600 mb-6 group">
        <img src="https://picsum.photos/800/450?random=1" alt="360 view placeholder" class="w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-80">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80 p-4 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
            <svg class="h-10 w-10 text-gray-700 dark:text-gray-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              <path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="flex flex-wrap justify-center gap-4 text-sm">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 6h2v8h-2zm0 10h2v2h-2z"/>
          </svg>
          More Details
        </a>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
          View Analysis
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 48 49 50 51 52 ... 335