Rechercher des composants

Catégories

Composants Composants fonctionnels

Composants fonctionnels

Composants qui fournissent des fonctionnalités spécifiques au site Web

Paper_Print_Media_Card

Une carte multimédia simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs pastel, avec prise en charge du mode sombre. Idéal pour les plateformes de divertissement ou de médias.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-800 dark:to-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border-2 border-gray-100 dark:border-gray-700">
    <!-- Faint textured background to mimic paper -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/clean-paper.png')] opacity-20 dark:opacity-5"></div>

    <div class="relative z-10 p-4 sm:p-6 md:p-8 lg:p-10 flex flex-col sm:flex-row items-center sm:items-start space-y-4 sm:space-y-0 sm:space-x-6">
      <!-- Image Section -->
      <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 rounded-md overflow-hidden shadow-md border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/400/400?random=1" alt="Media thumbnail" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105">
      </div>

      <!-- Content Section -->
      <div class="text-center sm:text-left flex-grow">
        <h2 class="text-xl sm:text-2xl md:text-3xl font-serif font-bold text-gray-800 dark:text-pink-100 mb-2 leading-tight">
          <span class="block">The Whispering Woods</span>
          <span class="block text-base sm:text-lg text-gray-500 dark:text-purple-300 font-sans italic">An Enchanting Journey</span>
        </h2>
        <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
          Dive into a world where ancient trees share their secrets and mystical creatures roam free. Join Elara on a quest to restore harmony to a forgotten realm.
        </p>
        
        <div class="flex items-center justify-center sm:justify-start text-gray-500 dark:text-gray-400 text-sm mb-4">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd" />
          </svg>
          <span>1h 45m</span>
          <span class="mx-2">•</span>
          <span>Fantasy, Adventure</span>
        </div>

        <div class="mt-4 flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
          <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-200 bg-pink-100 dark:bg-pink-700 dark:bg-opacity-20 hover:bg-pink-200 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 transition-all duration-200 text-sm font-semibold shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
            </svg>
            Watch Now
          </button>
          <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-purple-300 dark:border-purple-600 text-purple-700 dark:text-purple-200 bg-purple-100 dark:bg-purple-700 dark:bg-opacity-20 hover:bg-purple-200 dark:hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-purple-500 transition-all duration-200 text-sm font-semibold shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
            </svg>
            Details
          </button>
        </div>
      </div>
    </div>

    <!-- Decorative 'paper cut' edge -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-gray-100 to-transparent dark:from-gray-900 dark:to-transparent pointer-events-none">
      <div class="h-full w-full relative overflow-hidden">
        <div class="absolute inset-0 bg-[linear-gradient(to_right,transparent_1px,rgba(0,0,0,0.05)_1px,rgba(0,0,0,0.05)_2px,transparent_2px)] dark:bg-[linear-gradient(to_right,transparent_1px,rgba(255,255,255,0.02)_1px,rgba(255,255,255,0.02)_2px,transparent_2px)] bg-[length:10px_10px] transform -skew-y-1 -translate-y-px opacity-70"></div>
      </div>
    </div>
  </div>
</div>

Skeuomorphic Earth Tones Carte du Gouvernement

Un composant de carte simple et réactif avec des éléments de design skeuomorphes et une palette de couleurs de tons de terre, adapté aux sites Web gouvernementaux ou de services publics, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-sm mx-auto p-6 md:p-8 rounded-xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 border border-stone-300 transform transition-all duration-300
              dark:from-stone-700 dark:to-stone-800 dark:border-stone-600 dark:shadow-2xl
              hover:shadow-2xl dark:hover:shadow-lg-dark
              relative overflow-hidden
              group">
    <!-- Top Bevel Effect -->
    <div class="absolute inset-0 rounded-xl pointer-events-none 
                before:absolute before:inset-0 before:rounded-xl before:border before:border-stone-50 dark:before:border-stone-900 before:opacity-70 
                after:absolute after:inset-0 after:rounded-xl after:border after:border-stone-300 after:opacity-50 after:blur-sm dark:after:border-stone-700"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <div class="w-20 h-20 bg-stone-300 dark:bg-stone-600 rounded-full flex items-center justify-center shadow-inner mb-4
                  group-hover:scale-105 transition-transform duration-300
                  relative overflow-hidden animate-pulse-light dark:animate-pulse-dark">
        <!-- Inner Light Source Effect -->
        <div class="absolute inset-0 rounded-full 
                    before:absolute before:inset-0 before:rounded-full before:bg-gradient-to-br before:from-white/70 before:to-transparent before:p-0.5 before:blur-sm
                    after:absolute after:inset-0 after:rounded-full after:bg-gradient-to-tl after:from-black/10 after:to-transparent after:p-0.5 after:blur-sm"></div>
        <svg class="h-10 w-10 text-stone-700 dark:text-stone-300 drop-shadow-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm4 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-200 mb-2 drop-shadow-sm">Public Service Info</h2>
      <p class="text-stone-600 dark:text-stone-400 text-sm mb-6 leading-relaxed">
        Access essential information and services provided by your local government. Committed to serving the community.
      </p>
      <button type="button" class="py-2 px-6 rounded-lg text-sm font-medium
                  bg-gradient-to-br from-green-600 to-green-700 text-white shadow-md
                  border border-green-800
                  dark:from-green-700 dark:to-green-800 dark:border-green-900 dark:shadow-lg-dark
                  hover:from-green-700 hover:to-green-800 hover:shadow-lg
                  dark:hover:from-green-800 dark:hover:to-green-900 
                  active:scale-95 active:shadow-inner transition-all duration-150
                  relative overflow-hidden
                  brightness-100 group-hover:brightness-105">
        <!-- Button Bevel Effect -->
        <span class="absolute inset-0 rounded-lg pointer-events-none
                     before:absolute before:inset-0 before:rounded-lg before:border-t before:border-white/30 dark:before:border-white/20
                     after:absolute after:inset-0 after:rounded-lg after:border-b after:border-black/20 dark:after:border-black/30"></span>
        <span class="relative z-10">Learn More</span>
      </button>
    </div>
  </div>
</div>

<style>
/* Basic keyframes for a subtle glow/pulse effect for skeuomorphic elements */
@keyframes pulse-light {
  0%, 100% { box-shadow: 0 0 0px rgba(255, 255, 255, 0.4), inset 0 0 5px rgba(0, 0, 0, 0.1); }
  50% { box-shadow: 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0px 8px rgba(0, 0, 0, 0.15); }
}

@keyframes pulse-dark {
  0%, 100% { box-shadow: 0 0 0px rgba(0, 0, 0, 0.3), inset 0 0 5px rgba(255, 255, 255, 0.05); }
  50% { box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0px 8px rgba(255, 255, 255, 0.1); }
}

.animate-pulse-light {
  animation: pulse-light 4s infinite ease-in-out;
}

.dark .animate-pulse-dark {
  animation: pulse-dark 4s infinite ease-in-out;
}

/* Custom shadow for skeuomorphism */
.shadow-xl {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15), inset 0px 1px 0px rgba(255, 255, 255, 0.6),
                inset 0px -1px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.05);
}
.group:hover .shadow-2xl {
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.2), inset 0px 1px 0px rgba(255, 255, 255, 0.7),
                inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 1px rgba(0, 0, 0, 0.08);
}

.dark .shadow-2xl-dark {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4), inset 0px 1px 0px rgba(255, 255, 255, 0.05) /* Light bevel */,
                inset 0px -1px 0px rgba(0, 0, 0, 0.6) /* Dark bevel */, 0px 1px 1px rgba(0, 0, 0, 0.1);
}
.dark .group:hover .shadow-lg-dark {
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.08) /* Light bevel */,
                inset 0px -1px 0px rgba(0, 0, 0, 0.7) /* Dark bevel */, 0px 1px 1px rgba(0, 0, 0, 0.15);
}

/* Inner shadow for "pressed" effect on active button */
.active\:shadow-inner {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px -2px 4px rgba(255, 255, 255, 0.1);
}

.dark .active\:shadow-inner {
  box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.4), inset 0px -2px 4px rgba(255, 255, 255, 0.05);
}

</style>

Neon_Glow_Marketplace_Component

Un composant de marché complexe avec des éléments lumineux et lumineux et une palette de couleurs triadique, conçu pour les plates-formes multifournisseurs. Les fonctionnalités incluent des cartes de produits, des catégories, des recherches et des profils d’utilisateurs, tous réactifs et avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-gray-900 via-zinc-950 to-purple-950 text-emerald-300 dark:from-black dark:via-zinc-950 dark:to-fuchsia-950 overflow-hidden font-sans relative">

  <!-- Background Glows (Blurred) -->
  <div class="absolute top-0 left-1/4 w-96 h-96 bg-fuchsia-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-fuchsia-700"></div>
  <div class="absolute top-1/2 right-1/4 w-96 h-96 bg-emerald-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-emerald-700"></div>
  <div class="absolute bottom-0 left-1/2 w-96 h-96 bg-cyan-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-cyan-700"></div>

  <!-- Main Content Container -->
  <div class="relative z-10 container mx-auto px-4 py-8 md:py-12">

    <!-- Header/Navigation -->
    <header class="flex flex-col md:flex-row justify-between items-center mb-8 md:mb-12 p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 shadow-neon-emerald">
      <h1 class="text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-fuchsia-400 to-cyan-400 drop-shadow-neon-text mb-4 md:mb-0">
        GlowMarket
      </h1>
      <nav class="flex flex-wrap gap-4 lg:gap-8 justify-center">
        <a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </a>
        <a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
          Categories
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </a>
        <a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
          Vendors
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </a>
        <a href="#" class="text-lg font-medium text-emerald-300 hover:text-emerald-100 transition-all duration-300 relative group">
          Account
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-red-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        </a>
      </nav>
      <div class="flex items-center gap-4 mt-4 md:mt-0">
        <button class="flex items-center px-4 py-2 bg-emerald-600 rounded-lg text-white font-semibold hover:bg-emerald-700 transition duration-300 shadow-neon-emerald-sm relative overflow-hidden group">
          <svg class="w-5 h-5 mr-2 text-white transform group-hover:rotate-6 transition-transform" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h.01a1 1 0 000-2H3zm0 4a1 1 0 000 2h.01a1 1 0 000-2H3zm0 4a1 1 0 000 2h.01a1 1 0 100-2H3zm16 0a1 1 0 000 2h.01a1 1 0 100-2H19zm0-4a1 1 0 000 2h.01a1 1 0 000-2H19zm0-4a1 1 0 000 2h.01a1 1 0 000-2H19zM6 10a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm-8 4a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zm-8 4a2 2 0 11-4 0 2 2 0 014 0zm8 0a2 2 0 11-4 0 2 2 0 014 0zM12 4a2 2 0 100 4 2 2 0 000-4zm-8 8a2 2 0 100 4 2 2 0 000-4zm0-8a2 2 0 100 4 2 2 0 000-4zm8 0a2 2 0 100 4 2 2 0 000-4zm0 8a2 2 0 100 4 2 2 0 000-4zm8 0a2 2 0 100 4 2 2 0 000-4zM12 12a2 2 0 100 4 2 2 0 000-4zm0-4a2 2 0 100 4 2 2 0 000-4zM16 4a2 2 0 100 4 2 2 0 000-4zm0 8a2 2 0 100 4 2 2 0 000-4zm-4 4a2 2 0 100 4 2 2 0 000-4zM16 16a2 2 0 100 4 2 2 0 000-4zm-4-4a2 2 0 100 4 2 2 0 000-4z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path></svg>
          Cart
          <span class="absolute top-0 right-0 -mr-2 -mt-2 w-6 h-6 rounded-full bg-fuchsia-500 text-white text-xs flex items-center justify-center font-bold border-2 border-fuchsia-700 animate-pulse">3</span>
          <div class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-600 via-fuchsia-600 to-cyan-600 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
        </button>
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-fuchsia-500 shadow-neon-fuchsia-sm cursor-pointer hover:scale-110 transition-transform duration-300">
      </div>
    </header>

    <!-- Search and Filters Section -->
    <section class="mb-8 md:mb-12 p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 shadow-neon-fuchsia">
      <div class="flex flex-col md:flex-row gap-4 items-stretch md:items-center">
        <input type="text" placeholder="Search for products, vendors..." class="flex-grow px-5 py-3 rounded-lg bg-gray-700 focus:bg-gray-600 text-emerald-100 placeholder-emerald-300/60 border border-fuchsia-400/50 focus:border-fuchsia-400 outline-none text-lg transition-all duration-300 shadow-inner-neon-fuchsia caret-emerald-300">
        <button class="px-6 py-3 bg-fuchsia-600 text-white rounded-lg font-semibold hover:bg-fuchsia-700 transition duration-300 shadow-neon-fuchsia justify-center flex items-center shrink-0">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          Search
        </button>
        <select class="px-5 py-3 rounded-lg bg-gray-700 focus:bg-gray-600 text-emerald-100 border border-cyan-400/50 focus:border-cyan-400 outline-none text-lg transition-all duration-300 shadow-inner-neon-cyan shrink-0">
          <option>All Categories</option>
          <option>Electronics</option>
          <option>Apparel</option>
          <option>Gaming</option>
          <option>Arts & Crafts</option>
        </select>
      </div>
      <div class="flex flex-wrap gap-3 mt-4 items-center justify-center md:justify-start">
        <span class="text-emerald-300 font-medium">Filters:</span>
        <button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hover:text-emerald-100 transition duration-300 border border-emerald-400/30 shadow-inner-neon-emerald-sm">New Arrivals</button>
        <button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hover:text-emerald-100 transition duration-300 border border-fuchsia-400/30 shadow-inner-neon-fuchsia-sm">Top Rated</button>
        <button class="px-4 py-2 bg-gray-700 text-emerald-300 rounded-full text-sm hover:bg-gray-600 hovering:text-emerald-100 transition duration-300 border border-cyan-400/30 shadow-inner-neon-cyan-sm">On Sale</button>
      </div>
    </section>

    <!-- Featured Products Section -->
    <section class="mb-8 md:mb-12">
      <h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-emerald-400 to-fuchsia-400 drop-shadow-neon-text mb-6 text-center md:text-left">
        Featured Glows
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

        <!-- Product Card 1 -->
        <div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-emerald-500/30 shadow-neon-emerald backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <img src="https://picsum.photos/id/1018/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-fuchsia-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Quantum Hoverboard</h3>
          <p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Experience zero-gravity motion with our new Quantum Hoverboard, featuring customizable LED glow patterns.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$999.99</span>
            <div class="flex items-center">
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-gray-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 text-white rounded-lg font-semibold hover:from-emerald-700 hover:to-cyan-700 transition duration-300 shadow-neon-cyan relative overflow-hidden group-hover:shadow-neon-emerald">
            Add to Cart
            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Product Card 2 -->
        <div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-fuchsia-500/30 shadow-neon-fuchsia backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <img src="https://picsum.photos/id/1025/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-cyan-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Aura Smartwatch Pro</h3>
          <p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Track your vitals with a vibrant, customizable display. Features holographic projections for calls and messages.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$249.00</span>
            <div class="flex items-center">
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
            </div>
          </div>
          <button class="w-full py-3 bg-gradient-to-r from-fuchsia-600 to-emerald-600 text-white rounded-lg font-semibold hover:from-fuchsia-700 hover:to-emerald-700 transition duration-300 shadow-neon-emerald relative overflow-hidden group-hover:shadow-neon-fuchsia">
            Add to Cart
            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Product Card 3 -->
        <div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-cyan-500/30 shadow-neon-cyan backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
          <mark class="absolute top-3 left-3 bg-fuchsia-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md z-10 skew-x-[-10deg] animate-pulse glow-label">SALE!</mark>
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <img src="https://picsum.photos/id/1040/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-emerald-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">Sonic Soundbar X</h3>
          <p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Immersive 3D audio experience with pulsating RGB lights that sync to your music. Connects wirelessly.</p>
          <div class="flex items-center justify-between mb-4">
            <div>
              <span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$179.99</span>
              <span class="text-sm text-gray-400 line-through ml-2">$200.00</span>
            </div>
            <div class="flex items-center">
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
            </div>
          </div>
          <button class="w-full py-3 bg-gradient-to-r from-cyan-600 to-fuchsia-600 text-white rounded-lg font-semibold hover:from-cyan-700 hover:to-fuchsia-700 transition duration-300 shadow-neon-fuchsia relative overflow-hidden group-hover:shadow-neon-cyan">
            Add to Cart
            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Product Card 4 -->
        <div class="product-card bg-gray-800/60 dark:bg-zinc-900/60 p-5 rounded-xl border border-emerald-500/30 shadow-neon-emerald backdrop-blur-sm transform transition-all duration-500 hover:scale-[1.02] relative group overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
          <img src="https://picsum.photos/id/1043/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-lg mb-4 border border-fuchsia-400/30 shadow-md transform group-hover:scale-105 transition-transform duration-300">
          <h3 class="text-xl font-semibold text-emerald-200 mb-2 drop-shadow-sm">GlowFlow Keyboard</h3>
          <p class="text-emerald-300/80 text-sm mb-3 line-clamp-2">Ergonomic design with per-key RGB backlighting and tactile mechanical switches for ultimate gaming.</p>
          <div class="flex items-center justify-between mb-4">
            <span class="text-2xl font-bold text-fuchsia-400 drop-shadow-neon-fuchsia-sm">$129.00</span>
            <div class="flex items-center">
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-yellow-400">&#9733;</span>
              <span class="text-gray-500">&#9733;</span>
            </div>
          </div>
          <button class="w-full py-3 bg-gradient-to-r from-emerald-600 to-cyan-600 text-white rounded-lg font-semibold hover:from-emerald-700 hover:to-cyan-700 transition duration-300 shadow-neon-cyan relative overflow-hidden group-hover:shadow-neon-emerald">
            Add to Cart
            <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          </button>
        </div>

      </div>
    </section>

    <!-- Popular Categories Section -->
    <section class="mb-8 md:mb-12">
      <h2 class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 via-cyan-400 to-emerald-400 drop-shadow-neon-text mb-6 text-center md:text-left">
        Popular Categories
      </h2>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
        <!-- Category Card 1 -->
        <a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 text-center hover:shadow-neon-emerald transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <img src="https://picsum.photos/id/111/100/100" alt="Electronics Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-emerald-400 group-hover:border-emerald-200 transition-colors duration-300">
          <p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Electronics</p>
        </a>
        <!-- Category Card 2 -->
        <a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 text-center hover:shadow-neon-fuchsia transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <img src="https://picsum.photos/id/112/100/100" alt="Gaming Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-fuchsia-400 group-hover:border-fuchsia-200 transition-colors duration-300">
          <p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Gaming</p>
        </a>
        <!-- Category Card 3 -->
        <a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-cyan-500/30 text-center hover:shadow-neon-cyan transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
          <span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
          <img src="https://picsum.photos/id/113/100/100" alt="Home Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-cyan-400 group-hover:border-cyan-200 transition-colors duration-300">
          <p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Smart Home</p>
        </a>
        <!-- Category Card 4 -->
        <a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-emerald-500/30 text-center hover:shadow-neon-emerald transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
            <span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
            <img src="https://picsum.photos/id/114/100/100" alt="Wearables Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-emerald-400 group-hover:border-emerald-200 transition-colors duration-300">
            <p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Wearables</p>
        </a>
        <!-- Category Card 5 -->
        <a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 text-center hover:shadow-neon-fuchsia transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
            <span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
            <img src="https://picsum.photos/id/115/100/100" alt="Audio Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-fuchsia-400 group-hover:border-fuchsia-200 transition-colors duration-300">
            <p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Audio</p>
        </a>
        <!-- Category Card 6 -->
        <a href="#" class="group block p-4 rounded-xl backdrop-blur-sm bg-gray-800/50 dark:bg-zinc-900/50 border border-cyan-500/30 text-center hover:shadow-neon-cyan transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden">
            <span class="absolute inset-0 bg-gradient-to-br from-emerald-500/10 via-fuchsia-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
            <img src="https://picsum.photos/id/116/100/100" alt="Gadgets Icon" class="w-20 h-20 object-cover rounded-full mx-auto mb-3 border-2 border-cyan-400 group-hover:border-cyan-200 transition-colors duration-300">
            <p class="text-lg font-medium text-emerald-200 group-hover:text-white drop-shadow-sm">Gadgets</p>
        </a>
      </div>
    </section>

    <!-- Call to Action / Vendor Section -->
    <section class="p-6 md:p-8 rounded-xl backdrop-blur-sm bg-gray-700/50 dark:bg-zinc-900/50 border border-fuchsia-500/30 shadow-neon-fuchsia flex flex-col items-center justify-center text-center">
      <h2 class="text-3xl lg:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-cyan-400 to-fuchsia-400 mb-4 drop-shadow-neon-text">
        Become a Glow Vendor!
      </h2>
      <p class="text-lg md:text-xl text-emerald-200 mb-6 max-w-2xl">
        Join our vibrant marketplace and showcase your unique glowing products to a global audience. Easy setup, powerful tools.
      </p>
      <button class="px-8 py-4 bg-gradient-to-r from-fuchsia-600 to-emerald-600 text-white rounded-lg font-bold text-xl hover:from-fuchsia-700 hover:to-emerald-700 transition duration-300 shadow-neon-fuchsia transform hover:scale-105 active:scale-95 animate-pulse-glow relative overflow-hidden">
        Start Selling Today
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-emerald-500 via-fuchsia-500 to-cyan-500 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></span>
      </button>
    </section>

  </div>

  <!-- Footer -->
  <footer class="py-8 px-4 mt-12 bg-gray-900/70 dark:bg-black/70 border-t border-emerald-500/30 text-center text-emerald-400 shadow-inner-neon-emerald backdrop-blur-sm">
    <p class="text-lg mb-2">&copy; 2023 GlowMarket. All rights reserved.</p>
    <div class="flex justify-center flex-wrap gap-x-6 gap-y-2 text-md">
      <a href="#" class="hover:text-emerald-200 relative group">
        Privacy Policy
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-emerald-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-emerald-200 relative group">
        Terms of Service
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-fuchsia-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
      <a href="#" class="hover:text-emerald-200 relative group">
        Contact Us
        <span class="absolute inset-x-0 bottom-0 h-0.5 bg-cyan-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
      </a>
    </div>
  </footer>

  <!-- Custom Tailwind CSS (for glow effects and animation) -->
  <style>
    @keyframes blob {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0, 0) scale(1); }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .shadow-neon-emerald {
      box-shadow: 0 0 15px rgba(52, 211, 153, 0.6),
                  0 0 30px rgba(52, 211, 153, 0.4),
                  0 0 45px rgba(52, 211, 153, 0.2);
    }

    .shadow-neon-emerald-sm {
      box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
    }

    .shadow-inner-neon-emerald {
      box-shadow: inset 0 0 10px rgba(52, 211, 153, 0.4);
    }

    .shadow-inner-neon-emerald-sm {
      box-shadow: inset 0 0 5px rgba(52, 211, 153, 0.4);
    }

    .shadow-neon-fuchsia {
      box-shadow: 0 0 15px rgba(236, 72, 153, 0.6),
                  0 0 30px rgba(236, 72, 153, 0.4),
                  0 0 45px rgba(236, 72, 153, 0.2);
    }

    .shadow-neon-fuchsia-sm {
      box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
    }

    .shadow-inner-neon-fuchsia {
      box-shadow: inset 0 0 10px rgba(236, 72, 153, 0.4);
    }

    .shadow-inner-neon-fuchsia-sm {
      box-shadow: inset 0 0 5px rgba(236, 72, 153, 0.4);
    }

    .shadow-neon-cyan {
      box-shadow: 0 0 15px rgba(6, 182, 212, 0.6),
                  0 0 30px rgba(6, 182, 212, 0.4),
                  0 0 45px rgba(6, 182, 212, 0.2);
    }

    .shadow-neon-cyan-sm {
      box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
    }

    .shadow-inner-neon-cyan {
      box-shadow: inset 0 0 10px rgba(6, 182, 212, 0.4);
    }

    .shadow-inner-neon-cyan-sm {
      box-shadow: inset 0 0 5px rgba(6, 182, 212, 0.4);
    }

    .drop-shadow-neon-text {
      text-shadow: 0 0 5px rgba(255,255,255,0.7),
                   0 0 10px rgba(255,255,255,0.5),
                   0 0 15px rgba(255,255,255,0.3);
    }

    .drop-shadow-neon-fuchsia-sm {
        text-shadow: 0 0 3px rgba(236, 72, 153, 0.8), 0 0 8px rgba(236, 72, 153, 0.6);
    }

    @keyframes pulse-glow {
        0%, 100% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.7), 0 0 25px rgba(236, 72, 153, 0.5), 0 0 40px rgba(236, 72, 153, 0.3); }
        50% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.9), 0 0 35px rgba(236, 72, 153, 0.7), 0 0 55px rgba(236, 72, 153, 0.5); }
    }

    .animate-pulse-glow {
        animation: pulse-glow 2.5s infinite alternate ease-in-out;
    }

    mark.glow-label {
        box-shadow: 0 0 10px rgba(236, 72, 153, 0.8), 0 0 20px rgba(236, 72, 153, 0.6);
    }

    /* Dark Mode Overrides (if required, though parent takes care of most) */
    .dark .shadow-neon-emerald {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.6),
                    0 0 30px rgba(16, 185, 129, 0.4),
                    0 0 45px rgba(16, 185, 129, 0.2);
    }

    .dark .shadow-neon-fuchsia {
        box-shadow: 0 0 15px rgba(217, 70, 239, 0.6),
                    0 0 30px rgba(217, 70, 239, 0.4),
                    0 0 45px rgba(217, 70, 239, 0.2);
    }

    .dark .shadow-neon-cyan {
        box-shadow: 0 0 15px rgba(34, 211, 238, 0.6),
                    0 0 30px rgba(34, 211, 238, 0.4),
                    0 0 45px rgba(34, 211, 238, 0.2);
    }
  </style>

</div>

Composants fonctionnels

Composante de rencontre/sociale minimaliste/flat design avec un schéma de couleurs arc-en-ciel dégradé pour l’affichage d’un profil d’utilisateur.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="w-full max-w-sm rounded-xl overflow-hidden shadow-lg p-6 bg-white dark:bg-gray-800 transform transition-all duration-300 ease-in-out hover:scale-105">
    <div class="relative pb-2/3 rounded-lg overflow-hidden mb-4">
      <img class="absolute h-full w-full object-cover" src="https://picsum.photos/400/300?random=1" alt="Profile image">
      <div class="absolute inset-0 bg-gradient-to-br from-red-500 via-yellow-500 to-green-500 opacity-25"></div>
    </div>
    <div class="text-center">
      <div class="relative inline-block mb-4 -mt-16">
        <img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 object-cover transform transition-all duration-300 ease-in-out hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <span class="absolute bottom-1 right-1 block h-4 w-4 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-400"></span>
      </div>
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-1 leading-tight">
        Jane Doe
      </h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
        28, New York
      </p>
      <div class="flex justify-center space-x-2 text-sm mb-4">
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-purple-500 to-indigo-500">Travel</span>
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-indigo-500 to-blue-500">Art</span>
        <span class="px-3 py-1 rounded-full text-white dark:text-gray-900 bg-gradient-to-r from-blue-500 to-teal-500">Music</span>
      </div>
      <button class="w-full py-3 rounded-lg text-white font-semibold bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 hover:from-pink-600 hover:via-red-600 hover:to-yellow-600 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800 transition-all duration-300 ease-in-out">
        Connect
      </button>
    </div>
  </div>
</div>

Event_Conference_Schedule

Un composant réactif de calendrier d’événements/conférences avec un design inspiré du papier/de l’impression et une palette de couleurs vert forêt, y compris la prise en charge du mode sombre. Il dispose d’une navigation par onglets pour différents jours et de détails de session extensibles.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-green-50 to-green-100 dark:from-gray-900 dark:to-gray-800 font-sans text-gray-800 dark:text-gray-200 min-h-screen">

  <!-- Schedule Header -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-green-900 dark:text-green-300 mb-2 tracking-tight drop-shadow-sm">Conference Schedule</h1>
    <p class="text-lg sm:text-xl text-green-700 dark:text-green-400 font-medium">Stay informed about all the exciting sessions.</p>
  </div>

  <!-- Schedule Container - Mimics a printed page -->
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-850 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative border border-green-200 dark:border-gray-700">

    <!-- Page texture/border element -->
    <div class="absolute inset-0 border-4 border-dashed border-green-100 dark:border-gray-750 rounded-lg pointer-events-none"></div>

    <div class="p-4 sm:p-6 lg:p-8 relative z-10">

      <!-- Day Tabs Navigation -->
      <div role="tablist" aria-label="Conference Days" class="flex flex-wrap justify-center mb-6 border-b border-green-200 dark:border-gray-700">
        <button role="tab" id="tab-day1" aria-controls="panel-day1" aria-selected="true" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-800 dark:text-green-300 border-b-4 border-green-600 dark:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-900 dark:hover:text-green-200 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
          <span class="relative">
            <span class="block">Day 1</span>
            <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
          </span>
        </button>
        <button role="tab" id="tab-day2" aria-controls="panel-day2" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
          <span class="relative">
            <span class="block">Day 2</span>
            <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
          </span>
        </button>
        <button role="tab" id="tab-day3" aria-controls="panel-day3" aria-selected="false" class="tab-button py-3 px-4 sm:px-6 text-base sm:text-lg font-semibold text-green-700 dark:text-green-400 border-b-4 border-transparent hover:border-green-300 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-850 transition-colors duration-200 group hover:text-green-800 dark:hover:text-green-300 aria-selected:text-green-900 dark:aria-selected:text-white aria-selected:border-green-800 dark:aria-selected:border-green-200 whitespace-nowrap">
          <span class="relative">
            <span class="block">Day 3</span>
            <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-current opacity-0 group-[&.tab-button[aria-selected='true']]:opacity-100 transition-opacity"></span>
          </span>
        </button>
      </div>

      <!-- Schedule Content for Day 1 -->
      <div id="panel-day1" role="tabpanel" aria-labelledby="tab-day1" class="space-y-6">

        <!-- Session Item 1 -->
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Opening Keynote: The Future of Sustainable Tech</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T09:00">09:00 AM</time> - <time datetime="2024-10-27T10:00">10:00 AM</time> | Grand Ballroom</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Alice Johnson</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">Join Dr. Alice Johnson, a leading innovator in sustainable technologies, as she outlines the challenges and opportunities for a greener future. This session will explore cutting-edge advancements and their potential impact on our planet.</p>
            <p>Topics include renewable energy solutions, eco-friendly materials, and circular economy principles. A Q&A session will follow the presentation.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <!-- Session Item 2 -->
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relative">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Workshop: Hands-on AI for Environmental Monitoring</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T10:30">10:30 AM</time> - <time datetime="2024-10-27T12:00">12:00 PM</time> | Innovation Lab</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Dr. Ben Carter</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">This interactive workshop will guide participants through building and deploying AI models for real-world environmental data analysis. Bring your laptops for a practical session on data collection, feature engineering, and model training.</p>
            <p>Prerequisites: Basic understanding of Python and data science concepts. Limited seating available. Pre-registration recommended.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>

        <!-- Lunch Break -->
        <div class="bg-green-100 dark:bg-gray-700 rounded-lg p-4 sm:p-6 text-center shadow-md border border-green-300 dark:border-gray-600">
          <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1">Lunch Break</h3>
          <p class="text-base text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-27T12:00">12:00 PM</time> - <time datetime="2024-10-27T13:00">01:00 PM</time> | Conference Dining Hall</p>
        </div>

      </div>

      <!-- Schedule Content for Day 2 (hidden by default) -->
      <div id="panel-day2" role="tabpanel" aria-labelledby="tab-day2" class="space-y-6 hidden">
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Panel: Green Investments and Impact Funding</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-28T09:30">09:30 AM</time> - <time datetime="2024-10-28T10:30">10:30 AM</time> | Executive Boardroom</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm -ml-4">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Multiple Speakers</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">A moderated discussion with leading investors and fund managers on the growing landscape of green investments, ESG criteria, and how to effectively fund sustainable projects for maximum impact and returns.</p>
            <p>Panelists will share insights on emerging markets, risk assessment, and the future of responsible investing.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>
      </div>

      <!-- Schedule Content for Day 3 (hidden by default) -->
      <div id="panel-day3" role="tabpanel" aria-labelledby="tab-day3" class="space-y-6 hidden">
        <div class="bg-green-50 dark:bg-gray-800 rounded-lg p-4 sm:p-6 shadow-md border border-green-200 dark:border-gray-700 group hover:shadow-lg transition-all duration-300">
          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between relativ">
            <div class="flex-grow mb-3 sm:mb-0">
              <h3 class="text-xl sm:text-2xl font-bold text-green-900 dark:text-green-200 mb-1 leading-tight">Closing Ceremony & Future Initiatives</h3>
              <p class="text-sm text-green-700 dark:text-green-300 font-medium"><time datetime="2024-10-29T15:00">03:00 PM</time> - <time datetime="2024-10-29T16:00">04:00 PM</time> | Grand Ballroom</p>
            </div>
            <div class="flex items-center space-x-2">
              <img src="https://randomuser.me/api/portraits/women/90.jpg" alt="Speaker Avatar" class="w-10 h-10 rounded-full border-2 border-green-400 dark:border-green-600 shadow-sm">
              <span class="text-sm text-green-800 dark:text-green-300 font-semibold">Organizer Team</span>
            </div>
          </div>
          <div class="mt-4 pt-4 border-t border-green-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 text-sm leading-relaxed max-h-0 overflow-hidden group-has-[button[aria-expanded='true']]:max-h-96 transition-all duration-500 ease-in-out">
            <p class="mb-2">Join us for the closing ceremony to reflect on the insights gained, key takeaways, and discuss the collective impact. We will also announce future initiatives and opportunities for collaboration based on this year's themes.</p>
            <p>Networking reception to follow. Don't miss this opportunity to connect with fellow attendees and speakers.</p>
          </div>
          <div class="mt-4 text-center">
            <button aria-expanded="false" class="expand-button text-green-700 dark:text-green-400 hover:text-green-900 dark:hover:text-green-200 text-sm font-semibold py-1 px-3 rounded-full border border-green-300 dark:border-gray-600 hover:border-green-500 dark:hover:border-green-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-50 dark:focus:ring-offset-gray-800 transition-colors duration-200">
              <span class="expand-text-hide">Show Details</span>
              <span class="expand-text-show hidden">Hide Details</span>
              <svg class="inline-block w-4 h-4 ml-1 transform transition-transform duration-200 group-[button[aria-expanded='true']]:rotate-180" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Simple Script for Tab and Accordion Functionality -->
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const tabButtons = document.querySelectorAll('.tab-button');
      const tabPanels = document.querySelectorAll('[role="tabpanel"]');
      const expandButtons = document.querySelectorAll('.expand-button');

      // Tab functionality
      tabButtons.forEach(button => {
        button.addEventListener('click', () => {
          const targetPanelId = button.getAttribute('aria-controls');

          // Deactivate all tabs and hide all panels
          tabButtons.forEach(btn => {
            btn.setAttribute('aria-selected', 'false');
            btn.classList.remove('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
            btn.classList.add('border-transparent');
          });
          tabPanels.forEach(panel => panel.classList.add('hidden'));

          // Activate clicked tab and show its panel
          button.setAttribute('aria-selected', 'true');
          button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
          button.classList.remove('border-transparent');
          document.getElementById(targetPanelId).classList.remove('hidden');
        });

        // Set initial active tab state (Day 1)
        if (button.getAttribute('aria-selected') === 'true') {
            button.classList.add('border-green-600', 'dark:border-green-400', 'text-green-900', 'dark:text-green-200');
            button.classList.remove('border-transparent');
        }
      });

      // Accordion functionality
      expandButtons.forEach(button => {
        button.addEventListener('click', () => {
          const isExpanded = button.getAttribute('aria-expanded') === 'true';
          button.setAttribute('aria-expanded', !isExpanded);

          // Toggle text within the button
          const hideText = button.querySelector('.expand-text-hide');
          const showText = button.querySelector('.expand-text-show');

          if (isExpanded) {
            hideText.classList.remove('hidden');
            showText.classList.add('hidden');
          } else {
            hideText.classList.add('hidden');
            showText.classList.remove('hidden');
          }
        });
      });
    });
  </script>
</div>

Composants fonctionnels

Un composant de tableau de bord complexe et réactif avec une esthétique monospace/développeur, utilisant des neutres froids. Comprend des éléments de visualisation de données, des sections de type terminal et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-mono min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 transition-colors duration-300">

  <!-- Header -->
  <header class="flex flex-col md:flex-row items-center justify-between p-4 mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h1 class="text-2xl md:text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2 md:mb-0">SYSTEM_DASHBOARD:/&gt;</h1>
    <div class="flex items-center space-x-4">
      <span class="text-sm text-gray-600 dark:text-gray-400">STATUS: <span class="text-green-500 dark:text-green-400">ONLINE</span></span>
      <button class="p-2 rounded-md bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v2.102a1 1 0 01-.817.986l-3.238.162a1 1 0 00-.785.647L5.787 9.87a1 1 0 01-.194.275l-2.091 2.215a1 1 0 00-.071 1.488l2.946 3.682A1 1 0 008.3 18h7.42a1 1 0 00.999-.817l-.84-7.557a1 1 0 00-.916-.957L13 8.358V5.5c0-.682-.315-1.32-.862-1.745l-3.468-2.67c-.201-.155-.444-.24-.698-.24z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <img class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
    </div>
  </header>

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

    <!-- Left Column (Status & Logs) -->
    <div class="lg:col-span-2 space-y-6">

      <!-- System Overview Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">SYSTEM OVERVIEW://</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">CPU_LOAD:</span> <span class="font-bold text-orange-500 dark:text-orange-400">67%</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-orange-500 h-2 rounded-full" style="width: 67%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">MEM_USAGE:</span> <span class="font-bold text-yellow-500 dark:text-yellow-400">45% (8GB/16GB)</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">DISK_IO:</span> <span class="font-bold text-purple-500 dark:text-purple-400">120MB/s</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-purple-500 h-2 rounded-full" style="width: 70%;"></div>
            </div>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
            <p><span class="text-gray-600 dark:text-gray-400">NETWORK_LATENCY:</span> <span class="font-bold text-green-500 dark:text-green-400">18ms</span></p>
            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2">
              <div class="bg-green-500 h-2 rounded-full" style="width: 90%;"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- Recent Activity / Command Log -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">COMMAND_LOG://</h2>
        <div class="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-y-auto h-64 text-sm relative">
          <span class="absolute top-2 left-2 text-green-400 text-xs">>$ _</span>
          <pre class="whitespace-pre-wrap mt-4">
            <span class="text-gray-400">[0x1A2B]</span> <span class="text-green-400">SUCCESS</span>: Initializing core modules...
            <span class="text-gray-400">[0x3C4D]</span> <span class="text-yellow-400">WARN</span>: Data integrity check running, 0.5% errors detected.
            <span class="text-gray-400">[0x5E6F]</span> <span class="text-green-400">SUCCESS</span>: System update applied. Reboot required.
            <span class="text-gray-400">[0x7081]</span> <span class="text-red-400">ERROR</span>: Service 'AuthModule' failed to start on port 8080. Port in use.
            <span class="text-gray-400">[0x92A3]</span> <span class="text-green-400">SUCCESS</span>: User 'admin' logged in from 192.168.1.100.
            <span class="text-gray-400">[0xB4C5]</span> <span class="text-yellow-400">WARN</span>: High network traffic detected from external source. Blocked.
            <span class="text-gray-400">[0xD6E7]</span> <span class="text-green-400">SUCCESS</span>: Database backup initiated. Progress: 75%.
            <span class="text-gray-400">[0xF8G9]</span> <span class="text-blue-400">INFO</span>: Sensor array 'Alpha' reporting normal parameters.
            <span class="text-gray-400">[0x10H1]</span> <span class="text-red-400">ERROR</span>: Critical temperature detected in 'ServerRack-3'. Initiating shutdown.
            <span class="text-gray-400">[0x22I3]</span> <span class="text-green-400">SUCCESS</span>: Log rotation completed successfully.
            <span class="text-gray-400">[0x44J5]</span> <span class="text-yellow-400">WARN</span>: Disk space low on '/dev/sda1'. 10GB remaining.
            <span class="text-gray-400">[0x66K7]</span> <span class="text-green-400">SUCCESS</span>: Scheduled task 'DataPurge' executed.
          </pre>
        </div>
      </section>

    </div>

    <!-- Right Column (Components & Controls) -->
    <div class="space-y-6">

      <!-- Active Components Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">ACTIVE_COMPONENTS://</h2>
        <ul class="space-y-3">
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>NETWORK_MONITOR_v2.1</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1024</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>DATABASE_ENGINE_SQL_9</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1025</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-yellow-500 dark:text-yellow-400">&#x2714;</span>
            <span>SECURE_SHELL_DAEMON_SSH</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1026</span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-red-500 dark:text-red-400">&#x2716;</span>
            <span>PAYMENT_GATEWAY_API_PHP</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: <span class="text-red-500 dark:text-red-400">STOPPED</span></span>
          </li>
          <li class="flex items-center space-x-2 text-sm">
            <span class="text-green-500 dark:text-green-400">&#x2714;</span>
            <span>LOG_AGGREGATOR_v1.5</span>
            <span class="ml-auto text-gray-500 dark:text-gray-400">PID: 1028</span>
          </li>
        </ul>
        <button class="mt-4 w-full p-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">VIEW ALL PROCESSES</button>
      </section>

      <!-- Quick Actions Card -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">QUICK_ACTIONS://</h2>
        <div class="grid grid-cols-2 gap-3">
          <button class="p-3 bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 text-blue-800 dark:text-blue-200 rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.102a2 2 0 03.487 1.343L9.5 10l-1.5 5.25a1 1 0 00.324 1.013l.836.671L10 18h2v-2.102a2 2 0 00-.487-1.343L8.5 10l1.5-5.25a1 1 0 00-.324-1.013l-.836-.671L10 2H8z" clip-rule="evenodd"></path></svg>
            REBOOT_SYSTEM
          </button>
          <button class="p-3 bg-red-100 dark:bg-red-900 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200 rounded-md hover:bg-red-200 dark:hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></svg>
            HALT_SERVICE
          </button>
          <button class="p-3 bg-green-100 dark:bg-green-900 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200 rounded-md hover:bg-green-200 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
            ADD_NEW_TASK
          </button>
          <button class="p-3 bg-yellow-100 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm">
            <svg class="w-5 h-5 mx-auto mb-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
            EDIT_CONFIG
          </button>
        </div>
      </section>

      <!-- System Performance Chart Placeholder -->
      <section class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-300">PERFORMANCE_TREND://</h2>
        <div class="bg-gray-200 dark:bg-gray-700 h-48 rounded-md flex items-center justify-center text-gray-500 dark:text-gray-400 text-sm">
          [GRAPH_PLACEHOLDER: Data Visualization Here]
          <img class="w-full h-full object-cover rounded-md" src="https://picsum.photos/400/250?random=1" alt="Placeholder chart">
        </div>
      </section>

    </div>

  </div>

  <!-- Footer -->
  <footer class="text-center mt-8 text-gray-500 dark:text-gray-400 text-xs">
    SYSTEM_DASHBOARD_v1.0 &copy; 2023 // All rights reserved. &gt;_
  </footer>

</div>

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>

Skeuomorphic_Analogous_Simple_Business_Component

Un composant professionnel simple conçu avec un style skeuomorphe utilisant des couleurs analogues, réactif pour les ordinateurs de bureau, les tablettes et les mobiles, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-8 md:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-900 dark:to-zinc-800 font-sans">
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-amber-200 to-orange-300 dark:from-zinc-700 dark:to-stone-700 p-6 rounded-3xl shadow-xl dark:shadow-2xl-dark transform transition-transform duration-300 hover:scale-[1.01] border-t border-l border-white/50 dark:border-stone-600/50 border-r border-b border-orange-400/50 dark:border-zinc-800/50 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-radial from-transparent via-transparent to-amber-200/30 dark:to-zinc-700/30 pointer-events-none rounded-3xl"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-400/20 dark:bg-zinc-600/20 rounded-full blur-xl pointer-events-none"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-orange-300/20 dark:bg-zinc-500/20 rounded-full blur-xl pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center">
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-orange-800 dark:text-zinc-200 mb-4 tracking-tight drop-shadow-md dark:drop-shadow-sm-dark">
        <span class="block">Our Business Solutions</span>
        <span class="text-orange-600 dark:text-zinc-400">for Your Success</span>
      </h2>
      <p class="text-base sm:text-lg text-orange-700 dark:text-zinc-300 mb-8 max-w-2xl leading-relaxed">
        We combine innovative strategies with a deep understanding of your needs to deliver unparalleled results.
        Experience the difference of a partnership built on trust and excellence.
      </p>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 w-full">

        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
          <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
          <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L12 20.25M12 20.25L14.25 17M12 20.25V4M5.75 12H18.25"></path></svg>

          <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Strategic Vision</h3>
          <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
            We help you define clear, actionable strategies to navigate the future and achieve long-term growth.
          </p>
        </div>

        <div class="p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
            <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
            <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 10.5h19.5m-19.5 0a2.25 2.25 0 01-2.25-2.25V6.75M21.75 10.5a2.25 2.25 0 002.25-2.25V6.75m0 0a2.25 2.25 0 00-2.25-2.25H2.25A2.25 2.25 0 000 6.75v10.5a2.25 2.25 0 002.25 2.25h19.5a2.25 2.25 0 002.25-2.25V10.5m-19.5 0a2.25 2.25 0 00-2.25 2.25V17.25m4.5-6.75a.75.75 0 01.75-.75h.008v.008h-.008a.75.75 0 01-.75-.75V10.5zM12 17.25h.008v.008H12V17.25z"></path></svg>

            <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Innovative Solutions</h3>
            <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
              We craft custom, cutting-edge solutions tailored to overcome your unique business challenges.
            </p>
        </div>

        <div class="md:col-span-2 p-6 rounded-2xl bg-gradient-to-br from-amber-300 to-orange-200 dark:from-zinc-600 dark:to-stone-600 shadow-lg dark:shadow-xl-dark transform transition-transform duration-300 hover:scale-[1.02] active:scale-95 border-t border-l border-amber-50/70 dark:border-zinc-500/70 border-r border-b border-orange-400/70 dark:border-stone-700/70 group relative overflow-hidden">
            <div class="absolute inset-0 bg-dots opacity-10 dark:opacity-5 pointer-events-none"></div>
            <svg class="w-12 h-12 text-orange-700 dark:text-zinc-300 mb-4 mx-auto block drop-shadow-sm dark:drop-shadow-xs-dark group-hover:text-amber-800 dark:group-hover:text-zinc-100 transition-colors duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM12 10.5a.75.75 0 00-.75.75v3.75a.75.75 0 00.75.75h.008v.008h-.008v-.008z"></path></svg>

            <h3 class="text-xl font-semibold text-orange-900 dark:text-zinc-100 mb-2 drop-shadow-sm dark:drop-shadow-xs-dark">Guaranteed Results</h3>
            <p class="text-orange-800 dark:text-zinc-200 text-sm leading-relaxed">
              Our commitment to excellence translates into measurable outcomes, ensuring your investment yields significant returns.
            </p>
        </div>

      </div>

      <a href="#" class="mt-10 px-8 py-3 bg-orange-500 dark:bg-stone-500 text-white dark:text-zinc-100 font-semibold rounded-full shadow-lg hover:shadow-xl dark:hover:shadow-2xl-dark transform transition-transform duration-300 hover:scale-105 active:scale-95 text-lg
        border-t border-l border-orange-200 dark:border-stone-400
        border-r border-b border-orange-600 dark:border-zinc-600
        relative overflow-hidden group">
        <span class="relative z-10">Learn More</span>
        <span class="absolute inset-0 bg-orange-600/20 dark:bg-zinc-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></span>
      </a>
    </div>
  </div>

  <style>
    .shadow-2xl-dark {
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    .drop-shadow-sm-dark {
      filter: drop-shadow(0 1px 1px rgba(0,0,0,0.7));
    }
    .drop-shadow-xs-dark {
      filter: drop-shadow(0 0.5px 0.5px rgba(0,0,0,0.6));
    }
    .bg-dots {
      background-image: radial-gradient(circle, #fcd34d 1px, transparent 1px);
      background-size: 8px 8px;
      background-position: 0 0;
    }
    .dark .bg-dots {
      background-image: radial-gradient(circle, #71717a 1px, transparent 1px);
    }
    .bg-gradient-radial {
        background-image: radial-gradient(circle at center, var(--tw-gradient-stops));
    }
  </style>
</div>

Composante gouvernementale monochrome inspirée du papier et de l’impression

Un composant de complexité moyenne imitant le papier physique et les documents imprimés, conçu pour les sites Web du gouvernement et des services publics avec une palette de couleurs monochromatique et une réactivité totale, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden dark:bg-gray-850 transition-colors duration-300 ease-in-out border border-gray-200 dark:border-gray-700">
    <!-- Header Section (simulating a document header) -->
    <div class="bg-gray-200 p-4 border-b border-gray-300 dark:bg-gray-800 dark:border-gray-700 flex justify-between items-center">
      <h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-gray-700 dark:text-gray-300">Official Notice</h1>
      <span class="text-sm text-gray-600 dark:text-gray-400">Ref. ID: GVT-01-2023</span>
    </div>

    <!-- Document Body -->
    <div class="p-4 sm:p-6 md:p-8 space-y-6">
      <!-- Important Announcement/Title -->
      <div class="text-center">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 border-b-2 border-gray-400 pb-2 inline-block leading-tight">Public Service Announcement</h2>
        <p class="text-gray-600 dark:text-gray-400 text-sm italic">Issued: November 15, 2023</p>
      </div>

      <!-- Main Content Block 1 -->
      <section class="space-y-4">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 flex items-center">
          <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
          Key Information
        </h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          This is an urgent public service announcement regarding changes to <strong class="font-bold">local community guidelines for waste management</strong>. Effective immediately, residents are advised to adhere to the revised sorting procedures to ensure efficient recycling and reduce landfill impact.
        </p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-1 ml-4">
          <li>Separate plastics and glass from general waste.</li>
          <li>Compost organic materials where facilities are available.</li>
          <li>Dispose of hazardous waste at designated collection points only.</li>
        </ul>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed italic text-sm">Your cooperation is vital for the sustainability of our community.</p>
      </section>

      <!-- Interactive Section (e.g., links to resources/forms) -->
      <section class="bg-gray-50 dark:bg-gray-800 p-4 rounded-md border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg sm:text-xl font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center">
          <svg class="w-5 h-5 mr-2 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 3a1 1 0 100 2h2a1 1 0 100-2h-2z"/><path d="M10 7a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 14.414V17a1 1 0 102 0v-2.586l3.586 3.586a1 1 0 001.414-1.414l-7-7zM2 10a1 1 0 011-1h2a1 1 0 010 2H3a1 1 0 01-1-1zm15-1h-2a1 1 0 100 2h2a1 1 0 100-2zm-7 4a1 1 0 110-2 1 1 0 010 2zm.707 1a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 18.586V20a1 1 0 102 0v-1.414l3.586 3.586a1 1 0 001.414-1.414l-7-7z"/><path fill-rule="evenodd" d="M7 2a1 1 0 011 1v1h4V3a1 1 0 112 0v1h1a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zM3 8a1 1 0 011-1h12a1 1 0 011 1v5a1 1 0 01-1 1H4a1 1 0 01-1-1V8z" clip-rule="evenodd"></path></svg>
          Further Resources
        </h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
            <p>Download Full Guidelines <span aria-hidden="true">&rarr;</span></p>
          </a>
          <a href="#" class="block bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 px-3 rounded-md text-center text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border border-gray-300 dark:border-gray-600">
            <p>Locate Your Nearest Recycling Center <span aria-hidden="true">&rarr;</span></p>
          </a>
        </div>
      </section>

      <!-- Contact Information / Signature Block -->
      <footer class="text-right text-sm text-gray-600 dark:text-gray-400 pt-4 border-t border-gray-200 dark:border-gray-700">
        <p>Sincerely,</p>
        <p class="font-semibold mt-1">Department of Public Wellness</p>
        <p>City Hall, 123 Main St, Anytown, State 12345</p>
        <p>Contact: <a href="mailto:[email protected]" class="text-gray-700 dark:text-gray-300 underline hover:text-gray-500 dark:hover:text-gray-500 transition-colors">[email protected]</a></p>
      </footer>
    </div>
  </div>
</div>

Corporate_Portfolio_Showcase_Simple

Un composant de présentation de portefeuille simple, propre et fiable, conçu pour les environnements d’entreprise professionnels, utilisant une palette de couleurs triadique et prenant en charge le mode sombre.

Ouvrir Aperçu

                <section class="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
  <div class="container mx-auto px-4 max-w-6xl">
    <div class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-white mb-4">
        Our Latest Innovations
      </h2>
      <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed max-w-2xl mx-auto">
        Discover the impactful projects we've delivered, showcasing our expertise and commitment to excellence.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Project Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1015/600/400" alt="Project Image 1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Enterprise Solution X
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            A robust cloud-based platform designed to streamline operations for large enterprises.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.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 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></svg>
          </a>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1018/600/400" alt="Project Image 2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            Dynamic Data Dashboard
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            An intuitive analytics dashboard providing real-time insights for decision-makers.
          </p>
          <a href="#" class="inline-flex items-center px-4 py-2 bg-teal-600 text-white font-medium rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.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 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></svg>
          </a>
        </div>
      </div>

      <!-- Project Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden group hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/id/1020/600/400" alt="Project Image 3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            AI-Powered Customer Support
          </h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">
            An intelligent chatbot and knowledge base for enhanced customer experiences.
          </p>
          <a href="#" class="inline-flex items-center px-4 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 dark:focus:ring-offset-gray-900 transition-colors duration-300">
            View Case Study
            <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.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 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></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>