Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de lecteur audio ludique

Un composant de lecteur audio simple et ludique avec des tons sépia/brun chauds, des éléments arrondis et une esthétique joyeuse. Inclut la prise en charge du mode sombre et est entièrement réactif pour les plates-formes de divertissement et de médias.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-amber-50 dark:bg-stone-900">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-amber-100 dark:bg-stone-800 text-stone-800 dark:text-stone-200 border-2 border-amber-200 dark:border-stone-700 transform transition-all duration-300 hover:scale-[1.01]">
    <div class="flex items-center space-x-4 mb-6">
      <div class="relative w-20 h-20 flex-shrink-0">
        <img src="https://picsum.photos/id/1080/200/200" alt="Album Art" class="rounded-full object-cover w-full h-full shadow-md border-2 border-amber-300 dark:border-stone-600">
        <div class="absolute inset-0 rounded-full ring-4 ring-amber-200 dark:ring-stone-700 animate-pulse"></div>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-xl font-bold truncate text-amber-900 dark:text-amber-100 mb-1">Groovy Tunes</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 truncate">By Awesome Artist</p>
      </div>
    </div>

    <div class="w-full flex items-center mb-6">
      <span class="text-xs text-stone-500 dark:text-stone-400 mr-2">0:45</span>
      <div class="flex-1 h-2 bg-amber-200 dark:bg-stone-700 rounded-full overflow-hidden relative">
        <div class="absolute top-0 left-0 h-full bg-amber-500 dark:bg-amber-600 rounded-full" style="width: 60%;"></div>
        <div class="absolute top-1/2 -mt-2 -mr-2 w-4 h-4 bg-amber-700 dark:bg-amber-400 rounded-full shadow-md" style="left: 60%; transform: translateX(-50%);"></div>
      </div>
      <span class="text-xs text-stone-500 dark:text-stone-400 ml-2">3:20</span>
    </div>

    <div class="flex justify-around items-center mb-4">
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="19 20 9 12 19 4 19 20"></polygon>
          <line x1="5" y1="19" x2="5" y2="5"></line>
        </svg>
      </button>
      <button class="p-4 rounded-full bg-amber-500 dark:bg-amber-600 text-white shadow-lg hover:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:focus:ring-amber-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 3 19 12 5 21 5 3"></polygon>
        </svg>
      </button>
      <button class="p-3 rounded-full text-stone-600 dark:text-stone-400 hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="5 4 15 12 5 20 5 4"></polygon>
          <line x1="19" y1="5" x2="19" y2="19"></line>
        </svg>
      </button>
    </div>

    <div class="flex justify-between text-stone-500 dark:text-stone-400">
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="2"></circle>
          <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48 0a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="1" y1="3" x2="23" y2="21"></line>
          <path d="M15 5H9l-7 18h22L15 5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M7 21l-4-4V3.5a2.5 2.5 0 0 1 5 0V17l-4 4zM16.5 3.5a2.5 2.5 0 0 0-5 0V17l4 4 4-4V3.5z"></path>
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-amber-200 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 17H2a4 4 0 0 1 4-4h12l4 4zM2 7h20a4 4 0 0 0-4-4H6l-4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Photographie artistique Volet médiatique

Il s’agit d’un composant multimédia complexe et réactif pour les portfolios de photographie, avec un style de design aquarelle/artistique et une palette de couleurs rétro/vintage. Comprend plusieurs éléments interactifs et une prise en charge complète du mode sombre.

Ouvrir Aperçu

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

  <!-- Retro/Vintage Header -->
  <header class="mb-8 md:mb-12 text-center relative">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tight text-stone-700 dark:text-amber-200 drop-shadow-lg relative z-10">
      The Canvas of Light
    </h1>
    <p class="mt-2 text-lg sm:text-xl text-stone-600 dark:text-amber-300 relative z-10">
      A Collection of Visual Poetry
    </p>
    <!-- Artistic brush stroke effect -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full max-w-lg bg-gradient-to-br from-amber-200 to-orange-200 dark:from-stone-700 dark:to-orange-900 opacity-60 dark:opacity-40 rounded-full blur-3xl"></div>
  </header>

  <!-- Main grid for photo gallery -->
  <section class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">

    <!-- Featured Photo Card 1 -->
    <div class="col-span-1 rounded-xl overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 border border-amber-200 dark:border-stone-700 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1047/800/600" alt="Abstract watercolor mountain landscape" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Whispers of Dawn</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Landscape • Fine Art</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">A serene moment captured, blending the soft hues of dawn with the rugged peaks of nature.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Oct 23, 1978</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- Featured Photo Card 2 -->
    <div class="col-span-1 border border-amber-200 dark:border-stone-700 rounded-xl overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1025/800/600" alt="Vintage portrait of a man, artistic filter" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Soulful Gaze</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Portrait • Candid</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">An intimate portrayal, capturing raw emotion and a timeless connection.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Sep 15, 1982</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- Unique Artistic Section (Larger on Desktop for complexity) -->
    <div class="lg:col-span-1 rounded-xl overflow-hidden shadow-xl bg-orange-200 dark:bg-stone-700 text-stone-800 dark:text-amber-100 p-6 md:p-8 flex flex-col justify-between border border-orange-300 dark:border-stone-600 relative overflow-hidden">
      <h3 class="text-2xl sm:text-3xl font-bold text-stone-700 dark:text-amber-100 drop-shadow-md mb-4 z-10">Explore the Palette</h3>
      <p class="text-base sm:text-lg mb-6 z-10">Dive into our curated collections, where every image tells a story, painted with light and shadow. Discover the depth of artistic expression.</p>
      
      <!-- Interactive element: Artist Profile -->
      <div class="flex items-center space-x-4 mb-6 z-10">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Artist's avatar" class="w-16 h-16 rounded-full border-4 border-orange-400 dark:border-stone-500 shadow-lg">
        <div>
          <p class="font-semibold text-lg">Eleanor Vance</p>
          <p class="text-sm text-stone-700 dark:text-amber-200">Master of Light</p>
        </div>
      </div>

      <button class="w-full py-3 rounded-full bg-orange-400 dark:bg-orange-800 text-stone-900 dark:text-amber-100 font-bold text-lg hover:bg-orange-500 dark:hover:bg-orange-900 transition-colors duration-200 shadow-md transform hover:scale-105 z-10">
        Follow the Artist
      </button>
      <!-- Watercolor blob background -->
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-orange-300 dark:bg-stone-600 opacity-60 dark:opacity-40 rounded-full blur-3xl transform rotate-45"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-amber-300 dark:bg-stone-500 opacity-60 dark:opacity-40 rounded-full blur-3xl transform -rotate-15"></div>
    </div>

    <!-- General Photo Card 3 -->
    <div class="col-span-1 rounded-xl border border-amber-200 dark:border-stone-700 overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1069/800/600" alt="Vibrant street photography" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Urban Canvas</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Street • Abstract</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">The raw beauty of city life, captured in a candid and colorful brushstroke.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Apr 01, 1974</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- General Photo Card 4 (Another example) -->
    <div class="col-span-1 rounded-xl border border-amber-200 dark:border-stone-700 overflow-hidden shadow-xl transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl bg-amber-100/70 dark:bg-stone-800/70 backdrop-blur-sm">
      <div class="relative pb-2/3 overflow-hidden group">
        <img src="https://picsum.photos/id/1080/800/600" alt="Still life with artistic lighting" class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900/50 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <h3 class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-300 delay-100">Still Life Reverie</h3>
        </div>
      </div>
      <div class="p-4">
        <p class="text-sm text-stone-600 dark:text-amber-300 mb-2">Still Life • Studio</p>
        <p class="text-stone-700 dark:text-amber-200 text-base line-clamp-2">A thoughtful composition, exploring textures and light in a classic setup.</p>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm text-stone-500 dark:text-amber-400">Dec 08, 1969</span>
          <button class="px-3 py-1.5 rounded-full bg-orange-300 dark:bg-orange-700 text-stone-800 dark:text-amber-100 text-sm font-medium hover:bg-orange-400 dark:hover:bg-orange-600 transition-colors duration-200">
            View Artwork
          </button>
        </div>
      </div>
    </div>

    <!-- Call to action/Filter section on smaller screens, joins grid on larger -->
    <div class="col-span-1 rounded-xl border border-orange-300 dark:border-stone-600 overflow-hidden shadow-xl bg-orange-200 dark:bg-stone-700 text-stone-800 dark:text-amber-100 p-6 md:p-8 flex flex-col justify-center items-center text-center">
      <h3 class="text-xl sm:text-2xl font-bold mb-4">Refine Your View</h3>
      <p class="text-base text-stone-700 dark:text-amber-200 mb-6">Our extensive archives await your discovery. Filter by style, era, or artist.</p>
      <button class="w-full max-w-xs py-3 rounded-full bg-orange-400 dark:bg-orange-800 text-stone-900 dark:text-amber-100 font-bold text-lg hover:bg-orange-500 dark:hover:bg-orange-900 transition-colors duration-200 shadow-md transform hover:scale-105">
        Browse Collections
      </button>
    </div>

  </section>

  <!-- Footer with subtle artistic elements -->
  <footer class="mt-12 md:mt-16 text-center text-stone-600 dark:text-amber-300 relative z-10">
    <p class="text-sm">&copy; 2023 Artistic Lens. All rights reserved.</p>
    <!-- Subtle watercolor splash -->
    <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-48 h-16 bg-amber-200 dark:bg-stone-700 opacity-60 dark:opacity-40 rounded-full blur-2xl transform -skew-x-12"></div>
  </footer>

</div>

Composant de pied de page

Composant de pied de page simple, propre et fiable, adapté aux systèmes de réservation et de réservation d’entreprise/professionnels, doté d’une bordure subtile en dégradé arc-en-ciel et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-gradient-to-r from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 transition-colors duration-300 border-t-4 border-l-4 border-r-4 border-b-4 border-image-slice-1 border-image-source-rainbow py-8 sm:py-12 lg:py-16 mt-8 sm:mt-12 lg:mt-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-col md:flex-row justify-between items-center md:items-start text-center md:text-left gap-8">
      
      <!-- Company Info / Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="inline-flex items-center justify-center font-bold text-2xl tracking-tight text-gray-900 dark:text-white group">
          <svg class="h-8 w-8 mr-2 text-indigo-600 dark:text-indigo-400 group-hover:animate-bounce" 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-1M6.343 17.657l-.707.707M18.907 9.207L12 2m0 20c-3.737 0-6.86-2.585-7.747-6L2 12l2.253-4.747C5.14 3.585 8.263 1 12 1s6.86 2.585 7.747 6L22 12l-2.253 4.747C18.86 19.415 15.737 22 12 22zM12 19a7 7 0 100-14 7 7 0 000 14z"></path>
          </svg>
          <span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-600 via-indigo-600 to-blue-600 dark:from-purple-400 dark:via-indigo-400 dark:to-blue-400">BookFlow</span>
        </a>
        <p class="mt-3 text-sm text-gray-600 dark:text-gray-400 leading-relaxed max-w-xs">
          Your seamless journey from selection to confirmation. Book your next experience today.
        </p>
      </div>

      <!-- Navigation Links -->
      <div class="flex-grow grid grid-cols-2 md:grid-cols-3 gap-8 justify-items-center md:justify-items-start max-w-xl">
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Company
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">About Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Services</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Careers</a></li>
          </ul>
        </div>
        <div>
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Support
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Help Center</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Contact Us</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">FAQ</a></li>
          </ul>
        </div>
        <div class="col-span-2 md:col-span-1">
          <h3 class="text-sm font-semibold text-gray-800 dark:text-white uppercase tracking-wider mb-3">
            Legal
          </h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Privacy Policy</a></li>
            <li><a href="#" class="text-base text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">Terms of Service</a></li>
          </ul>
        </div>
      </div>

    </div>

    <div class="mt-10 pt-8 border-t border-gray-200 dark:border-gray-800 text-center">
      <p class="text-sm text-gray-600 dark:text-gray-400">
        &copy; 2023 BookFlow Inc. All rights reserved.
      </p>
    </div>
  </div>
</footer>

<style>
  /* This is an example of applying the gradient rainbow border using custom CSS for demonstration.
     In a real Tailwind project, you might use a similar approach or a utility plugin for more complex gradients.
     For a simple rainbow, a linear-gradient for border-image-source is effective. */
  .border-image-source-rainbow {
    border-image-source: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  }
</style>

Composant de navigation en pied de page - Monospace/style développeur

Un composant de navigation de pied de page complexe et réactif conçu pour les sites Web agricoles, avec une esthétique monospace/développeur avec une palette de couleurs arc-en-ciel dégradée et la prise en charge du mode sombre.

Ouvrir Aperçu

                <footer class="bg-violet-950 text-emerald-200 dark:bg-black font-mono text-[0.8rem] md:text-[0.9rem] lg:text-[1rem] p-6 lg:p-10 border-t-4 border-l-2 border-r-2 border-b-2 tracking-tighter" style="border-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7) 1;">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 md:gap-12">
    
    <!-- Company Info & Logo (ASCII Art style) -->
    <div class="flex flex-col items-start">
      <pre class="text-xl md:text-2xl lg:text-3xl font-bold mb-4 bg-clip-text text-transparent" style="background-image: linear-gradient(to right, #ef4444, #f97316, #eab308);">_FARMBOT_</pre>
      <p class="mb-4 leading-relaxed">// Precision Agriculture Solutions<br>// Est. 2023 // All rights reserved.</p>
      <div class="flex space-x-3 mt-auto">
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">GitHub</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">Twitter</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.251c1.32 0 2.428-.482 3.313-1.423-.42-.01-.796-.126-1.09-.344-.294-.216-.525-.503-.693-.868-.168-.364-.252-.76-.252-1.189 0-.426.084-.816.252-1.17s.4-.645.717-.899c.316-.254.67-.457 1.06-.61a.987.987 0 001.09.28.986.986 0 00.56-.379c.196-.285.344-.61.444-.973.1-.36.147-.745.147-1.15-.008-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02-.566-.2-.962-.294-1.189-.283-.404.01-.762.1-1.077.268-.314.162-.572.392-.774.69-.202.298-.352.645-.448 1.03-.095.385-.143.784-.143 1.198 0 1.25.418 2.302 1.254 3.155.836.852 1.848 1.278 3.037 1.278.47 0 .91-.122 1.31-.365.39-.24.717-.58.98-.98.263-.4.4-.84.4-1.32 0-.203-.03-.396-.088-.58-.058-.184-.14-.356-.248-.517-.107-.16-.23-.3-.368-.415-.138-.112-.29-.197-.456-.253-.166-.056-.34-.084-.52-.084-.44 0-.79.08-1.05.23-.26.15-.46.33-.6.54-.14.21-.24.44-.3.69-.06.25-.09.5-.09.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278.418-.185.78-.44 1.085-.76-.795.342-1.57.513-2.325.513-1.636 0-3.003-.548-4.098-1.645-1.094-1.102-1.64-2.457-1.64-4.062 0-.96.223-1.85.67-2.67.447-.82 1.066-1.48 1.85-1.98.784-.5 1.63-.75 2.54-.75.7 0 1.34.135 1.92.405.58.27.94.59 1.08.96.14.37.16.89.06 1.55-.1.66-.4 1.38-1 2.15l-.83.99c-.27.32-.4.65-.4.98 0 .44.2.78.6.99.4.21.92.31 1.55.31h.06c.38 0 .76-.04 1.13-.12.37-.08.7-.21 1-.4l.87-.5c.29-.17.51-.38.67-.62.16-.24.27-.5.33-.78.06-.28.09-.56.09-.844 0-.66-.192-1.226-.55-1.706-.358-.48-.82-.82-1.385-1.02s-1.1-.3-1.4-.3h-.1c-.48 0-.91.07-1.29.21-.37.14-.69.34-.96.6-.27.26-.48.56-.63.9-.15.34-.23.69-.23 1.05 0 .96.34 1.77 1.03 2.44.69.67 1.6.99 2.73.99 1.13 0 2.04-.33 2.73-1 2.87-2.85 2-.128 2.226-.402 1.258-2.68 1.956-5.07 2.09-.37.26-1.6 3.65-1.605 5.578 0 1.2-.5 2.21-1.5 3.03s-2.09 1.23-3.32 1.23c-.76 0-1.48-.12-2.16-.36l.28-.15c.34-.18.66-.41.97-.69.3-.28.58-.6.83-.97.25-.37.45-.77.61-1.2c.16-.43.25-.88.27-1.37h.02c.07-.37.1-.73.1-.96 0-.2-.014-.38-.04-.54-.028-.16-.07-.31-.13-.45-.06-.14-.14-.26-.24-.37-.1-.11-.22-.2-.36-.28-.14-.08-.29-.13-.46-.16-.17-.03-.35-.04-.54-.04h-.05c-.32 0-.65.04-.98.11s-.64.18-.95.29c-.31.11-.6.25-.86.4-.26.15-.48.33-.66.54-.18.21-.32.44-.42.69-.1.25-.15.5-.15.76 0 .43.204.77.61 1.02.407.25.92.375 1.54.375.438 0 .866-.093 1.285-.278v.01ZM12 4c.621 0 1.24.032 1.854.095-.506-.217-1.04-.413-1.58-.592-.54-.179-1.09-.34-1.65-.482-.56-.142-1.12-.27-1.68-.383-.56-.112-1.12-.206-1.68-.283C6.477.01 2 4.475 2 10.017c0 4.425 2.865 8.18 6.83 9.504.5.092.682-.217.682-.483 0-.237-.008-.865-.013-1.7c-2.782.607-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.069-.607.069-.607 1.002.072 1.527 1.027 1.527 1.027.89 1.529 2.347 1.085 2.91.828.092-.643.35-1.085.635-1.332-2.22-.251-4.555-1.114-4.555-4.942 0-1.096.393-1.993 1.03-2.69-.103-.252-.446-1.277.098-2.65 0 0 .84-.27 2.75 1.025A9.432 9.432 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.373.202 2.398.099 2.65.648.697 1.028 1.594 1.028 2.69 0 3.838-2.339 4.686-4.566 4.935.359.307.678.915.678 1.846 0 1.335-.012 2.41-.012 2.73 0 .268.18.579.688.482A10.05 10.05 0 0022 12.017C22 6.484 17.522 2 12 2Z" clip-rule="evenodd" /></svg></a>
        <a href="#" class="transition-colors duration-300 hover:text-emerald-400"><span class="sr-only">LinkedIn</span><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s-.75-1.764 1.75-1.764 1.75.79 1.75 1.764-1.75 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.764 7 2.677v6.558z" clip-rule="evenodd" /></svg></a>
      </div>
    </div>

    <!-- Navigation Links -->
    <div>
      <h3 class="text-orange-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// NAVIGATION</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> About FarmBot</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Our Technology</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Precision Farming</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Crop Optimization</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Case Studies</a></li>
      </ul>
    </div>

    <!-- Support & Resources -->
    <div>
      <h3 class="text-blue-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// SUPPORT & DOCS</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> FAQ</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Get Started Guide</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> API Reference</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Community Forum</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Contact Support</a></li>
      </ul>
    </div>

    <!-- Legal & Policies -->
    <div>
      <h3 class="text-purple-400 font-bold mb-4 tracking-wide border-b border-dotted pb-1">// LEGAL & POLICY</h3>
      <ul class="space-y-2">
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Terms of Service</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Privacy Policy</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Cookie Policy</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Licensing</a></li>
        <li><a href="#" class="hover:text-emerald-400 transition-colors duration-200">> Accessibility</a></li>
      </ul>
    </div>

    <!-- Newsletter Signup (Terminal-like) -->
    <div class="lg:col-span-4 mt-8 flex flex-col items-center">
      <h3 class="text-pink-400 font-bold mb-4 tracking-wide">// SUBSCRIBE FOR UPDATES</h3>
      <p class="mb-4 text-center max-w-lg">Receive the latest agricultural tech insights and FarmBot news directly to your inbox. <span class="text-orange-300">[No spam. Ever.]</span></p>
      <form class="w-full max-w-sm flex flex-col md:flex-row gap-2">
        <label for="email-input" class="sr-only">Email Address</label>
        <input id="email-input" type="email" placeholder="> enter_email_address..." class="flex-grow min-w-0 p-3 rounded-md bg-transparent border border-emerald-400 text-emerald-200 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:bg-zinc-800 dark:border-emerald-600 dark:placeholder:text-zinc-600 dark:focus:ring-emerald-600 text-sm md:text-base" aria-label="Email address for newsletter">
        <button type="submit" class="p-3 rounded-md bg-gradient-to-r from-green-500 to-blue-500 text-stone-900 font-bold hover:from-green-600 hover:to-blue-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 uppercase text-sm md:text-base transition-all duration-300 ease-in-out">
          <span class="block group-hover:hidden">[SEND]</span>
          <span class="hidden group-hover:block">[INITIATE_SUBSCRIPTION]</span>
        </button>
      </form>
    </div>

  </div>

  
  <div class="mt-10 pt-6 border-t border-dashed border-gray-700 dark:border-gray-500 text-center text-gray-500 text-xs md:text-sm">
    <p class="mb-2">&copy; 2023 FarmBot Inc. &middot; <span class="text-gray-600 dark:text-gray-400">// Code Licensed Under MIT.</span></p>
    <p><code>[STATUS_REPORT: OPERATIONAL] [VERSION: 1.0.0] [DEPLOYMENT_DATE: 2023-10-27]</code></p>
  </div>
</footer>

Composant Cartes thermiques

Un composant de carte thermique réactif avec une esthétique industrielle et verte forêt pour les interfaces de médias sociaux, prenant en charge les modes clair et sombre.

Ouvrir Aperçu

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

    <!-- Header Section -->
    <div class="p-4 sm:p-6 bg-emerald-700 dark:bg-emerald-900 text-stone-50 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Activity Heat Map</h2>
      <div class="flex items-center space-x-2">
        <button class="p-2 rounded-full hover:bg-emerald-600 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
          </svg>
        </button>
        <button class="p-2 rounded-full hover:bg-emerald-600 dark:hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>
    </div>

    <div class="p-4 sm:p-6">
      <!-- Filters/Navigation -->
      <nav class="mb-6 flex flex-wrap items-center justify-between text-sm sm:text-base font-medium border-b border-stone-300 dark:border-stone-700 pb-3">
        <ul class="flex flex-wrap gap-x-4 gap-y-2 sm:gap-x-6">
          <li><a href="#" class="text-emerald-700 dark:text-emerald-400 border-b-2 border-emerald-700 dark:border-emerald-400 pb-1">Daily</a></li>
          <li><a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400">Weekly</a></li>
          <li><a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400">Monthly</a></li>
          <li><a href="#" class="hover:text-emerald-700 dark:hover:text-emerald-400">Yearly</a></li>
        </ul>
        <div class="flex items-center gap-2 mt-2 sm:mt-0">
          <label for="period-select" class="sr-only">Select Period</label>
          <select id="period-select" class="p-2 rounded-md bg-stone-200 dark:bg-stone-700 border border-stone-300 dark:border-stone-600 text-stone-800 dark:text-stone-200 focus:ring-emerald-500 focus:border-emerald-500">
            <option>Last 30 Days</option>
            <option>Last 90 Days</option>
            <option>Last Year</option>
          </select>
          <button class="p-2 rounded-md bg-stone-200 dark:bg-stone-700 hover:bg-stone-300 dark:hover:bg-stone-600 border border-stone-300 dark:border-stone-600 focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-600 dark:text-stone-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
            </svg>
          </button>
        </div>
      </nav>

      <!-- Heat Map Grid -->
      <div class="overflow-x-auto pb-4">
        <div class="grid grid-flow-col gap-1 auto-cols-min min-w-full" style="grid-template-rows: repeat(7, minmax(0, 1fr));">
          <!-- Days of Week Labels -->
          <div class="sticky left-0 bg-stone-50 dark:bg-stone-800 z-10 pr-2 border-r border-stone-200 dark:border-stone-700 flex flex-col justify-around text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400">
            <div class="h-5 flex items-center justify-end">Mon</div>
            <div class="h-5 flex items-center justify-end">Tue</div>
            <div class="h-5 flex items-center justify-end">Wed</div>
            <div class="h-5 flex items-center justify-end">Thu</div>
            <div class="h-5 flex items-center justify-end">Fri</div>
            <div class="h-5 flex items-center justify-end">Sat</div>
            <div class="h-5 flex items-center justify-end">Sun</div>
          </div>

          <!-- Main Heat Map Cells -->
          <div class="col-span-full grid grid-flow-col gap-1 auto-cols-min" style="grid-template-rows: repeat(7, minmax(0, 1fr));">
            <!-- Month Label Row -->
            <div class="col-span-full flex gap-1 mb-1" style="grid-row: 1;">
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Jan</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Feb</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Mar</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Apr</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">May</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Jun</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Jul</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Aug</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Sep</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Oct</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Nov</div>
              <div class="w-[var(--col-width)] text-center text-xs sm:text-sm font-medium text-stone-600 dark:text-stone-400" style="--col-width: 24px;">Dec</div>
            </div>

            <!-- Example Cells (dynamic data would populate these) -->
            <!-- A simple loop to generate some placeholder cells to demonstrate the layout. -->
            <!-- In a real application, you would generate these based on actual data with varying levels. -->
            <!-- Each div represents a day. The `data-tooltip` would be added by JS for interactivity. -->
            <!-- Using inline style `width` for consistent cell sizing in this grid approach relative to `grid-template-rows`. -->
            <!-- Using custom properties for width for better maintainability if dynamically generated. -->
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Jan 1: 0 contributions"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer mt-auto" title="Feb 2: 7 contributions"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Mar 3: 15 contributions"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Apr 4: 25 contributions"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="May 5: 2 contributions"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Jun 6: 8 contributions"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600 transition-all duration-150 relative cursor-pointer" title="Jul 7: 18 contributions"></div>

            <!-- More example cells -->
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <!-- Repeat for ~52 columns to simulate a year, varying the background color for visual heat -->
            <!-- Example of dynamic generation logic (would be in JS/backend): -->
            <!-- for (let i = 0; i < 365; i++) { -->
            <!--   const intensity = Math.floor(Math.random() * 5); // 0-4 -->
            <!--   const colors = ['bg-emerald-100 dark:bg-emerald-950', 'bg-emerald-300 dark:bg-emerald-800', 'bg-emerald-500 dark:bg-emerald-600', 'bg-emerald-700 dark:bg-emerald-400', 'bg-emerald-900 dark:bg-emerald-200']; -->
            <!--   <div class="w-6 h-5 rounded-sm ${colors[intensity]} hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div> -->
            <!-- } -->
            <!-- Placeholder for about 52 columns -->
            <!-- This block would be repeated for each column (week) -->
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <!-- Repeat this for around 52 weeks (columns) or 365 days (cells) for full year -->
            <!-- Start of additional columns to simulate a full year of data -->
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <!-- Continue adding more columns as needed for a full year -->
            <!-- Example of a few more weeks to fill space -->
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>

            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-700 dark:bg-emerald-400 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald- green-900 dark:bg-emerald-200 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-100 dark:bg-emerald-950 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-300 dark:bg-emerald-800 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <div style="--col-width: 24px;" class="group w-[var(--col-width)] h-5 rounded-sm bg-emerald-500 dark:bg-emerald-600 hover:ring-2 hover:ring-emerald-400 dark:hover:ring-emerald-600"></div>
            <!-- End of additional cells -->
          </div>
        </div>
      </div>

      <!-- Legend & Summary -->
      <div class="mt-6 flex flex-wrap justify-between items-center text-sm">
        <div class="flex items-center gap-2">
          <span class="text-stone-600 dark:text-stone-400">Less</span>
          <div class="flex gap-1">
            <div class="w-4 h-4 rounded-sm bg-emerald-100 dark:bg-emerald-950"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-300 dark:bg-emerald-800"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-500 dark:bg-emerald-600"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald- green-700 dark:bg-emerald-400"></div>
            <div class="w-4 h-4 rounded-sm bg-emerald-900 dark:bg-emerald-200"></div>
          </div>
          <span class="text-stone-600 dark:text-stone-400">More</span>
        </div>
        <div class="flex items-center mt-4 sm:mt-0">
          <span class="text-stone-600 dark:text-stone-400 mr-2">Total Contributions:</span>
          <strong class="text-lg font-semibold text-emerald- green-700 dark:text-emerald-400">1,234</strong>
        </div>
      </div>

      <!-- User Profile (Optional, for context in social media) -->
      <div class="mt-6 pt-6 border-t border-stone-200 dark:border-stone-700 flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-emerald-500 dark:border-emerald-400">
        <div>
          <p class="font-semibold text-stone-800 dark:text-stone-200">Jane Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">@janedoe · Joined Oct 2023</p>
        </div>
      </div>

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

Composant de fenêtre de chat

Un composant de fenêtre de chat réactif conçu selon les principes de Material Design, avec une palette de couleurs automnale adaptée aux organisations à but non lucratif/caritatives. Comprend la prise en charge du mode sombre et des éléments interactifs tels que des bulles de message et un champ de saisie.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden flex flex-col h-[70vh] md:h-[80vh] lg:h-[75vh]">
    <!-- Chat Header -->
    <div class="flex items-center justify-between p-4 bg-orange-700 dark:bg-orange-900 text-white shadow-md">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-300" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Chat User Avatar">
        <h2 class="text-lg font-semibold">Sarah Jenkins</h2>
      </div>
      <div class="flex space-x-3">
        <button aria-label="Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
          </svg>
        </button>
        <button aria-label="Video Call" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10l4.872-3.248A1 1 0 0122 7.744v8.512a1 1 0 01-2.128.536L15 14m-5 4v-4a4 4 0 014-4h.5a.5.5 0 01.5.5v3.5a.5.5 0 01-.5.5H10zm0 0a2 2 0 100-4 2 2 0 000 4z"/>
          </svg>
        </button>
        <button aria-label="More Options" class="p-2 rounded-full hover:bg-orange-800 dark:hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Chat Body (Messages) -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 dark:bg-gray-800 scrollbar-thumb-orange-800 dark:scrollbar-thumb-orange-600 scrollbar-track-orange-100 dark:scrollbar-track-gray-700 scrollbar-thin">

      <!-- Received Message -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Hello! Thank you so much for reaching out. We appreciate your interest in our 'Harvest Hope' initiative.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
      </div>

      <!-- Sent Message -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <p class="text-sm">I'm excited to learn more! How can I make a donation, and what impact will it have?</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:07 AM</span>
        </div>
      </div>

      <!-- Received Message with longer text -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">You can donate directly through our website at <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">[Your Charity Website Link]</a>. Every contribution helps us provide food, shelter, and education to those in need, especially during this season.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:08 AM</span>
        </div>
      </div>

      <!-- Sent Message with image -->
      <div class="flex items-end justify-end">
        <div class="bg-orange-600 dark:bg-orange-700 text-white p-2 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] material-blob-right">
          <img src="https://picsum.photos/300/200?random=1" alt="Image attachment" class="rounded-lg mb-2 shadow-lg w-full h-auto object-cover">
          <p class="text-sm">This looks like a wonderful cause! Here's a photo from our recent charity drive to share some inspiration.</p>
          <span class="text-xs text-orange-200 dark:text-orange-300 mt-1 block text-left">10:10 AM</span>
        </div>
      </div>

      <!-- Received message with another user -->
      <div class="flex items-end justify-start">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Another User Avatar">
        <div class="bg-white dark:bg-gray-700 p-3 rounded-xl shadow-md max-w-[75%] lg:max-w-[60%] border border-gray-200 dark:border-gray-600 material-blob-left">
          <p class="text-gray-800 dark:text-gray-200 text-sm">Thanks for sharing that, John! It's inspiring to see the community come together.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400 mt-1 block text-right">10:12 AM</span>
        </div>
      </div>

    </div>

    <!-- Chat Input -->
    <div class="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-inner flex items-center space-x-2">
      <button aria-label="Attach File" class="p-2 text-gray-600 dark:text-gray-400 hover:text-orange-600 dark:hover:text-orange-400 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75 rounded-full">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
        </svg>
      </button>
      <input type="text" placeholder="Type a message..." aria-label="Chat message input" class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-600 focus:border-transparent text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400">
      <button aria-label="Send Message" class="p-2 bg-orange-600 dark:bg-orange-700 text-white rounded-full shadow-md hover:bg-orange-700 dark:hover:bg-orange-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-45 -mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for Webkit browsers */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track-color, transparent);
    border-radius: 10px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--tw-scrollbar-thumb-color);
    border-radius: 10px;
    border: 2px solid var(--tw-scrollbar-track-color, transparent);
  }

  /* Fallback for Firefox and other browsers, using standard properties where possible */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb-color) var(--tw-scrollbar-track-color);
  }

  /* Tailwind utility classes for scrollbar */
  .scrollbar-thumb-orange-800 {
    --tw-scrollbar-thumb-color: #9A3412;
  }
  .dark\:scrollbar-thumb-orange-600 {
    --tw-scrollbar-thumb-color: #DDAA55;
  }
  .scrollbar-track-orange-100 {
    --tw-scrollbar-track-color: #FFF7ED;
  }
  .dark\:scrollbar-track-gray-700 {
    --tw-scrollbar-track-color: #374151;
  }

  /* Material Design-inspired blob shapes for message bubbles */
  .material-blob-left {
    border-top-left-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
  .material-blob-right {
    border-top-right-radius: 4px; /* Slight adjustment for a less sharp corner */
  }
</style>

Point culminant de la fonctionnalité de jeu

Une fonctionnalité de jeu réactive met en évidence un composant avec un design épuré et minimaliste mettant l’accent sur la typographie et un système de grille, en utilisant des neutres chauds et en prenant en charge le mode sombre. Comprend une grande image, un titre, une description et un bouton d’action.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-100 text-stone-900 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 lg:gap-12 items-center">

    <!-- Main Feature Card -->
    <div class="md:col-span-1 lg:col-span-2 bg-white dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
      <img src="https://picsum.photos/1200/600?random=1" alt="Epic Game Scene" class="w-full h-60 sm:h-80 md:h-96 object-cover object-center" loading="lazy">
      <div class="p-6 sm:p-8 lg:p-10">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight tracking-tight mb-4 text-stone-900 dark:text-stone-50">
          Immersive Worlds. Unforgettable Adventures.
        </h2>
        <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 mb-6 lg:mb-8 leading-relaxed">
          Dive into breathtaking landscapes, embark on perilous quests, and redefine your gaming experience with unparalleled graphics and captivating storylines.
        </p>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-semibold rounded-md shadow-sm text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition duration-200 ease-in-out dark:bg-orange-500 dark:hover:bg-orange-600 dark:focus:ring-orange-400 dark:focus:ring-offset-stone-900">
          Explore Games
          <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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><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"></path></svg>
        </a>
      </div>
    </div>

    <!-- Side Feature Cards Wrapper -->
    <div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6 md:gap-8">

      <!-- Smaller Feature Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img src="https://picsum.photos/600/300?random=2" alt="Multiplayer" class="w-full h-36 object-cover object-center" loading="lazy">
        <div class="p-5">
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
            Connect Global Gamers
          </h3>
          <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
            Join millions worldwide in competitive and cooperative play. Build alliances, conquer rivals.
          </p>
        </div>
      </div>

      <!-- Smaller Feature Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-lg">
        <img src="https://picsum.photos/600/300?random=3" alt="Exclusive Content" class="w-full h-36 object-cover object-center" loading="lazy">
        <div class="p-5">
          <h3 class="text-xl sm:text-2xl font-bold mb-2 text-stone-900 dark:text-stone-50">
            Exclusive Content Unlocked
          </h3>
          <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-snug">
            Access unique in-game items, early betas, and member-only events. Enhance your journey.
          </p>
        </div>
      </div>

    </div>

  </div>
</div>

Composant Mentions de l’utilisateur

Un composant simple, propre et réactif avec une palette de couleurs vives, conçu dans un style de typographie suisse/international pour une utilisation en portfolio. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-pink-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border-t-4 border-indigo-600 dark:border-indigo-500">
    <div class="p-4 sm:p-6 pb-2 sm:pb-2 md:p-8 md:pb-4 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl md:text-3xl lg:text-3xl font-extrabold text-gray-900 dark:text-white mb-1 sm:mb-2 leading-tight tracking-tight">
        Mentions
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-medium">
        People talking about you.
      </p>
    </div>

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

      <!-- Mention Item 1 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              John Doe
              <span class="text-xs text-indigo-600 dark:text-indigo-400 font-medium ml-1">@johndoe</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2h ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "This project's design is <span class="font-semibold text-indigo-700 dark:text-indigo-300">outstanding</span>! Really impressed by the attention to detail."
          </p>
        </div>
      </div>

      <!-- Mention Item 2 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              Jane Smith
              <span class="text-xs text-purple-600 dark:text-purple-400 font-medium ml-1">@janesmithy</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">5h ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "Just saw the new <span class="font-semibold text-purple-700 dark:text-purple-300">case study</span>, incredibly insightful. Great work!"
          </p>
        </div>
      </div>

      <!-- Mention Item 3 -->
      <div class="p-4 sm:p-6 flex items-start space-x-3 sm:space-x-4">
        <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full ring-2 ring-pink-500 dark:ring-pink-400" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex items-center justify-between mb-0.5">
            <p class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
              Michael B.
              <span class="text-xs text-pink-600 dark:text-pink-400 font-medium ml-1">@mikeyb_design</span>
            </p>
            <span class="text-xs text-gray-500 dark:text-gray-400">1d ago</span>
          </div>
          <p class="text-sm text-gray-700 dark:text-gray-300 leading-tight">
            "Their portfolio sets a new standard. The <span class="font-semibold text-pink-700 dark:text-pink-300">UX flow</span> is seamless and intuitive."
          </p>
        </div>
      </div>

    </div>

    <div class="p-4 sm:p-6 pt-2 sm:pt-2 md:p-8 md:pt-4 text-center">
      <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md text-indigo-700 dark:text-indigo-200 bg-indigo-100 dark:bg-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
        View All Mentions
        <svg class="ml-2 -mr-0.5 w-4 h-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

  </div>
</div>

Neumorphic_Mega_Menu_Weather_Climate

Un méga composant de menu réactif, de style neumorphique, pour les données météorologiques et climatiques, avec une palette de couleurs pastel et la prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-blue-100 dark:bg-gray-800 font-sans relative">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-blue-600 dark:text-blue-300 text-2xl font-bold tracking-tight">
            <svg class="h-8 w-8 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 15a4 4 0 004 4h9a5 5 0 005-5V7a2 2 0 00-2-2H5a2 2 0 00-2 2v8z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01"></path></svg>
            ClimateCast
          </a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative group">
          <button class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
            group-hover:translate-y-px group-hover:shadow-neumorphic-inset-light dark:group-hover:shadow-neumorphic-inset-dark
            transition-all duration-300 ease-in-out
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
            relative">
            Forecasts
            <svg class="ml-2 -mr-0.5 h-4 w-4 inline-block transform group-hover:rotate-180 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
          <div class="absolute hidden group-hover:block z-50 mt-3 w-max rounded-lg p-6
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
            transition-all duration-300 ease-out origin-top-left">
            <div class="grid grid-cols-2 gap-y-4 gap-x-8">
              <div>
                <h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Daily Forecasts</h3>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Today's Weather
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  7-Day Outlook
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Hourly Breakdown
                </a>
              </div>
              <div>
                <h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Specialized</h3>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Marine Weather
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Aviation Weather
                </a>
                <a href="#" class="block text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                  hover:translate-x-1 transition-transform duration-200">
                  Agriculture Weather
                </a>
              </div>
              <div class="col-span-2">
                <h3 class="text-blue-600 dark:text-blue-300 text-lg font-bold mb-2 pb-1 border-b border-blue-200 dark:border-gray-700">Global Insights</h3>
                <div class="grid grid-cols-3 gap-2">
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Europe
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Americas
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Asia
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Africa
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Oceania
                  </a>
                  <a href="#" class="text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100 text-sm font-medium py-1
                    hover:translate-x-1 transition-transform duration-200">
                    Antarctica
                  </a>
                </div>
              </div>
              <div class="col-span-2 p-4 rounded-md shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
                <p class="text-blue-700 dark:text-gray-300 text-xs italic">"Always be prepared. Knowing the forecast is the first step."</p>
              </div>
            </div>
          </div>
        </div>

        <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Climate Data
        </a>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Maps & Radar
        </a>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 px-3 py-2 rounded-md text-sm font-medium ml-4
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
          Resources
        </a>
      </div>
      <div class="flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-blue-700 dark:text-blue-300
          hover:text-blue-900 dark:hover:text-blue-100 bg-blue-100 dark:bg-gray-800
          shadow-neumorphic-light dark:shadow-neumorphic-dark
          focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500
          data-[state=open]:translate-y-px data-[state=open]:shadow-neumorphic-inset-light dark:data-[state=open]:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false" data-state="closed">
          <span class="sr-only">Open main menu</span>
          <svg class="h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg class="h-6 w-6 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="hidden md:hidden absolute w-full top-16 left-0 z-40 p-4
    bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <div class="relative group block">
        <button class="w-full text-left text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 block px-3 py-2 rounded-md text-base font-medium
          bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
          group-hover:translate-y-px group-hover:shadow-neumorphic-inset-light dark:group-hover:shadow-neumorphic-inset-dark
          transition-all duration-300 ease-in-out
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
          flex items-center justify-between" data-mobile-submenu-toggle>
          Forecasts
          <svg class="ml-2 -mr-0.5 h-4 w-4 inline-block transform group-data-[state=open]:rotate-180 transition-transform duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
        <div class="hidden mt-2 ml-4 space-y-1 data-[state=open]:block" data-mobile-submenu>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Today's Weather
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            7-Day Outlook
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Hourly Breakdown
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Marine Weather
          </a>
          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-gray-300 hover:text-blue-900 dark:hover:text-blue-100
            bg-blue-100 dark:bg-gray-800 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark
            hover:translate-y-px transition-all duration-200">
            Aviation Weather
          </a>
        </div>
      </div>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
        bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
        hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
        transition-all duration-300 ease-in-out">
        Climate Data
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
        bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
        hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
        transition-all duration-300 ease-in-out">
        Maps & Radar
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100
        bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark
        hover:translate-y-px hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark
        transition-all duration-300 ease-in-out">
        Resources
      </a>
    </div>
  </div>
</nav>

<!-- Custom Styles for Neumorphism -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #9ec2e6, -6px -6px 12px #c2e6ff; /* Soft pastel blue base */
  }
  .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #3a3a3a;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 4px 4px 8px #9ec2e6, inset -4px -4px 8px #c2e6ff;
  }
  .shadow-neumorphic-inset-dark {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #3a3a3a;
  }

  /* Override Tailwind's default display for custom behavior */
  .group:hover .group-hover\:block {
    display: block;
  }
  .group-hover\:translate-y-px {
    transform: translateY(1px);
  }
  .hover\:translate-y-px:hover {
    transform: translateY(1px);
  }

  /* Mobile menu specific handling (requires JS to toggle classes) */
  .md\:hidden [aria-expanded='false'] + svg {
    display: block;
  }
  .md\:hidden [aria-expanded='true'] + svg {
    display: none;
  }
  .md\:hidden [aria-expanded='true'] {
    border-radius: 0.375rem; /* rounded-md */
    transform: translateY(1px);
    box-shadow: inset 4px 4px 8px #9ec2e6, inset -4px -4px 8px #c2e6ff; /* shadow-neumorphic-inset-light */
  }
  .dark .md\:hidden [aria-expanded='true'] {
    box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #3a3a3a; /* shadow-neumorphic-inset-dark */
  }

  [data-state="closed"] + svg:first-of-type {
    display: block;
  }
  [data-state="open"] + svg:first-of-type {
    display: none;
  }
  [data-state="closed"] + svg:last-of-type {
    display: none;
  }
  [data-state="open"] + svg:last-of-type {
    display: block;
  }

  /* For mobile submenu toggling */
  [data-mobile-submenu-toggle][data-state="open"] + svg {
    display: block; /* The arrow */
    transform: rotate(180deg);
  }
  [data-mobile-submenu-toggle][data-state="closed"] + svg {
    transform: rotate(0deg);
  }
  [data-mobile-submenu][data-state="open"] {
    display: block;
  }

</style>

<!-- Minimal JavaScript for mobile menu and submenu functionality -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', () => {
        const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
        mobileMenuButton.setAttribute('aria-expanded', String(!isExpanded));
        mobileMenuButton.setAttribute('data-state', isExpanded ? 'closed' : 'open');
        mobileMenu.classList.toggle('hidden', isExpanded);

        // Toggle the hamburger/close icon
        mobileMenuButton.querySelector('svg:first-of-type').classList.toggle('hidden', !isExpanded);
        mobileMenuButton.querySelector('svg:last-of-type').classList.toggle('hidden', isExpanded);
      });
    }

    const mobileSubmenuToggles = document.querySelectorAll('[data-mobile-submenu-toggle]');

    mobileSubmenuToggles.forEach(toggle => {
      toggle.setAttribute('data-state', 'closed'); // Initialize state
      toggle.addEventListener('click', () => {
        const submenu = toggle.nextElementSibling; // Get the corresponding submenu div
        if (submenu && submenu.hasAttribute('data-mobile-submenu')) {
          const isExpanded = toggle.getAttribute('data-state') === 'open';
          toggle.setAttribute('data-state', isExpanded ? 'closed' : 'open');
          submenu.classList.toggle('hidden', isExpanded);
          submenu.setAttribute('data-state', isExpanded ? 'closed' : 'open');
        }
      });
    });
  });
</script>

NéonGlowFooterNavigation

Un composant de navigation de pied de page réactif avec des effets de néon/lueur, conçu pour les plateformes musicales/audio. Dispose d’une palette de couleurs noir et blanc avec une couleur d’accentuation vibrante, la prise en charge du mode sombre et le HTML sémantique.

Ouvrir Aperçu

                <footer class="bg-zinc-950 text-gray-400 py-8 px-4 dark:bg-black w-full shadow-2xl shadow-fuchsia-500/20">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 ">

    <!-- Section 1: Logo & Slogan -->
    <div class="col-span-full md:col-span-1 lg:col-span-1 flex flex-col items-center md:items-start mb-6 md:mb-0">
      <a href="#" class="text-fuchsia-400 text-3xl font-bold tracking-wide relative 
                  before:content-[''] before:absolute before:-inset-0.5 before:block before:bg-fuchsia-500/30 before:rounded-lg before:blur-sm before:animate-pulse 
                  after:content-[''] after:absolute after:-inset-0.5 after:block after:bg-fuchsia-500/10 after:rounded-lg after:blur-md after:animate-pulse">
        <span class="relative z-10">BeatWave</span>
      </a>
      <p class="mt-4 text-sm text-gray-500 dark:text-gray-600">Ignite Your Sound</p>
      <div class="flex space-x-4 mt-6">
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" 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.33V22H12c5.523 0 10-4.477 10-10Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M19.5 2h-15A2.5 2.5 0 0 0 2 4.5v15A2.5 2.5 0 0 0 4.5 22h15a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 19.5 2ZM17.1 v-2.2H14.9c-.83 0-1.1.33-1.1 1.07v1.13h2.4l-.32 2.3h-2.08v6.7h-2.73v-6.6a1.1 1.1 0 0 1-1.12-1.1c0-.49 1.12-1.07 1.12-2.3v-2.3c0-2.45 1.5-3.8 3.75-3.8 1.05 0 2.2.14 2.2.14v2.5Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-colors duration-300 relative group">
          <svg class="w-6 h-6 group-hover:drop-shadow-[0_0_8px_rgba(236,72,153,0.8)]" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M.931 7.28c-.378-.58-.707-.58-.87-.312C-.07 7.218.006 7.636.006 8.016v8.435c0 .38-.076.798-.016.963.163.267.492.267.87.312l4.898-.052 8.358 8.36c.58.58 1.52.58 2.1 0l6.21-6.21c.58-.58.58-1.52 0-2.1l-6.21-6.21-8.358-8.36L.93.948h.001Z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Section 2: Discover -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Discover
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">New Releases</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Top Charts</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Genres</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Artists</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 3: Community -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Community
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Forums</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Support</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Help Center</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 4: Company -->
    <div>
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Company
      </h3>
      <ul class="space-y-3">
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">About Us</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Careers</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Press</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
        <li><a href="#" class="text-gray-500 hover:text-fuchsia-400 transition-all duration-300 relative group">
          <span class="relative z-10">Terms of Service</span>
          <span class="absolute inset-0 bg-fuchsia-500/20 opacity-0 group-hover:opacity-100 group-hover:blur-sm transition-opacity duration-300 -z-0 rounded-sm"></span>
        </a></li>
      </ul>
    </div>

    <!-- Section 5: Newsletter Signup -->
    <div class="col-span-full md:col-span-3 lg:col-span-1">
      <h3 class="text-lg font-semibold text-white dark:text-gray-300 mb-4 relative 
                   before:absolute before:left-0 before:bottom-0 before:w-full before:h-0.5 before:bg-fuchsia-400 before:scale-x-0 before:transition-transform before:duration-300 before:origin-left hover:before:scale-x-100">
        Stay Tuned
      </h3>
      <p class="text-sm text-gray-500 dark:text-gray-600 mb-4">Subscribe to our newsletter for the latest updates and exclusive content.</p>
      <form class="flex flex-col sm:flex-row gap-2">
        <label for="email-address" class="sr-only">Email address</label>
        <input id="email-address" name="email" type="email" autocomplete="email" required
               class="w-full flex-grow px-4 py-2 bg-zinc-800 border-2 border-zinc-700 rounded-md text-white placeholder-gray-500
                      focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:border-transparent 
                      shadow-inner shadow-zinc-700/50 dark:bg-zinc-900 dark:border-zinc-800 dark:shadow-zinc-800/50"
               placeholder="Enter your email">
        <button type="submit"
                class="px-6 py-2 bg-fuchsia-600 text-white font-medium rounded-md 
                       hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 focus:ring-offset-zinc-950 
                       transition-all duration-300 relative overflow-hidden group
                       shadow-lg shadow-fuchsia-500/30
                       dark:shadow-fuchsia-500/40">
          <span class="relative z-10">Subscribe</span>
          <span class="absolute inset-0 bg-gradient-to-r from-fuchsia-500 to-purple-600 opacity-0 group-hover:opacity-100 
                       blur-sm group-hover:blur-[1px] transition-all duration-300"></span>
        </button>
      </form>
    </div>

  </div>

  <!-- Copyright -->
  <div class="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-500 dark:border-gray-700">
    &copy; 2023 BeatWave. All rights reserved.
  </div>
</footer>

1 ... 27 28 29 30 31 ... 335

Rechercher des composants

Catégories

Tous les composants