Rechercher des composants

Catégories

Composants Disposition de la grille

Disposition de la grille

Disposition du contenu basée sur un système de grille

Industrial_Juwel_Tones_Grid_Layout_Component

Un composant de mise en page de grille réactive pour le conseil/les services, présentant une esthétique industrielle avec des couleurs de bijou. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir Aperçu

                <section class="py-12 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight text-emerald-700 dark:text-emerald-400 mb-4">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-3xl mx-auto">
        Leveraging a deep understanding of industry dynamics, we deliver bespoke solutions that drive transformation and sustainable growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Service Card 1 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-emerald-600 dark:hover:border-emerald-500">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-emerald-600 dark:bg-emerald-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" 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 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-1.208-8.454-3.327M10 6L6 2m0 0L2 6m4-4v14m0-4 4 4m0 0 4-4m-4 4h14m-4-4 4-4m0 0 4 4"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Strategic Planning</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            We help define clear visions, actionable strategies, and robust roadmaps for future success.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-emerald-600 dark:bg-emerald-500 text-white rounded-md font-semibold text-lg hover:bg-emerald-700 dark:hover:bg-emerald-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75">
            Learn More
          </a>
        </div>
      </div>

      <!-- Service Card 2 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-ruby-600 dark:hover:border-ruby-500" style="--ruby-600: #DC2626; --ruby-500: #EF4444;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-red-600 dark:bg-red-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13m-6 3H9M3 19V6l12-3m-6 3v13m-6 0V6.364v3.272m0 10.364V12a8 8 0 008 8h2.091M17 19H9M7 6H4a1 1 0 00-1 1v12a1 1 0 001 1h16a1 1 0 001-1V7a1 1 0 00-1-1h-3.398m-7.798 0V5.091c0-.5-.41-.909-.909-.909h-.182c-.5 0-.909.41-.909.909V6m-2.182 0l-2.062 4.4L4 12V7c0-.55.45-1 1-1h2.182zm1.636 0L12 9.091L13.182 6m2.182 0l2.062 4.4L20 12V7c0-.55-.45-1-1-1h-2.182z"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Operational Excellence</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Optimize processes, streamline workflows, and enhance productivity across your organization.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-red-600 dark:bg-red-500 text-white rounded-md font-semibold text-lg hover:bg-red-700 dark:hover:bg-red-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75">
            Explore Services
          </a>
        </div>
      </div>

      <!-- Service Card 3 -->
      <div class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-sapphire-600 dark:hover:border-sapphire-500" style="--sapphire-600: #2563EB; --sapphire-500: #3B82F6;">
        <div class="p-6 sm:p-8 relative z-10">
          <div class="flex items-center justify-center w-16 h-16 bg-blue-600 dark:bg-blue-500 text-white rounded-full mb-6 mx-auto group-hover:scale-110 transition-transform duration-300">
            <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M9 9l3 3m0 0l3-3m-3 3l-3 3m3-3v8m4-12h4m-2 2v4m1-13.438V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868M6.5 17L12 22l5.5-5M9 7h6m-1 7h2m-1 6H9m6-10V4.57c0-0.342 0.28-0.627 0.622-0.627h.06c0.342 0 0.622 0.285 0.622 0.627v.868"></path></svg>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-3 text-center">Digital Transformation</h3>
          <p class="text-gray-700 dark:text-gray-300 text-center leading-relaxed mb-6">
            Navigate the digital landscape with confidence, implementing cutting-edge technologies.
          </p>
          <a href="#" class="block mx-auto text-center px-6 py-3 bg-blue-600 dark:bg-blue-500 text-white rounded-md font-semibold text-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
            Start Your Journey
          </a>
        </div>
      </div>

      <!-- Service Card 4 (Horizontal, Image-backed) -->
      <div class="md:col-span-2 relative group bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-2xl hover:border-purple-600 dark:hover:border-purple-500">
        <img src="https://picsum.photos/id/160/1200/600" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-20 dark:opacity-10 group-hover:scale-105 transition-transform duration-500">
        <div class="p-6 sm:p-8 flex flex-col md:flex-row items-center relative z-10">
          <div class="flex-shrink-0 mb-6 md:mb-0 md:mr-8">
            <div class="flex items-center justify-center w-20 h-20 bg-purple-600 dark:bg-purple-500 text-white rounded-full mx-auto md:mx-0 group-hover:rotate-12 transition-transform duration-300">
              <svg class="h-10 w-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12.5M16 11H4m10 0a2 2 0 100-4m-10 4a2 2 0 100-4m-2 4h4m-2-4v4m-2 2L9 20l-4-4

Watercolor_Artistic_Grid_Layout_Consulting

Un composant de mise en page de grille simple et réactif pour le conseil/les services, avec un design aquarelle/artistique doux avec des neutres froids et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gradient-to-br from-blue-50 to-indigo-100 text-gray-800 dark:from-gray-900 dark:to-gray-800 dark:text-gray-200 p-6 md:p-12 lg:p-16
            relative overflow-hidden group">
  <!-- Background artistic overlay for light mode -->
  <div class="absolute inset-0 z-0 opacity-40 dark:opacity-0 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2020/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(199, 210, 254)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(224, 231, 255)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(165, 180, 252)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <!-- Background artistic overlay for dark mode -->
  <div class="absolute inset-0 z-0 opacity-0 dark:opacity-30 pointer-events-none"
    style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><filter id="blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="40" /></filter><circle cx="200" cy="300" r="150" fill="rgb(31, 41, 55)" filter="url(%23blur)" /><circle cx="700" cy="500" r="200" fill="rgb(55, 65, 81)" filter="url(%23blur)" /><circle cx="400" cy="750" r="100" fill="rgb(17, 24, 39)" filter="url(%23blur)" /></svg>'); background-repeat: no-repeat; background-size: cover; background-position: center;"></div>

  <div class="relative z-10 max-w-7xl mx-auto py-8 lg:py-12">
    <header class="text-center mb-12">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4
                 text-gray-900 dark:text-gray-50 drop-shadow-lg leading-tight">
        Our Consulting Expertise
      </h2>
      <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
        Empowering your business with strategic insights and tailored solutions.
      </p>
    </header>

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

      <!-- Service Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><circle cx="50" cy="50" r="40" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1015/300/200" alt="Strategy Development" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Strategy Development</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Crafting innovative strategies to navigate complex markets and achieve sustainable growth.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M20 50 L80 50 M50 20 L50 80" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1041/300/200" alt="Operations Optimization" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Operations Optimization</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Streamlining processes and enhancing efficiency to maximize your operational performance.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

      <!-- Service Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300
                      overflow-hidden border border-gray-200 dark:border-gray-700
                      transform hover:-translate-y-1 group-hover:scale-[0.99] group-hover:first:scale-100
                      relative pb-6">
        <div class="absolute inset-0 pointer-events-none"
             style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.1">
             <rect x="0" y="0" width="100" height="100" fill="lightgray"/><path d="M10 90 L90 10 L80 90 L10 90 Z" fill="lightgray" stroke="white" stroke-width="2"/></svg>');
             background-size: 150px; background-repeat: no-repeat; background-position: center top;">
        </div>
        <div class="relative p-6 flex flex-col items-center text-center">
          <img src="https://picsum.photos/id/1060/300/200" alt="Digital Transformation" class="rounded-lg mb-4 w-full h-48 object-cover object-center border border-gray-100 dark:border-gray-600 shadow-sm">
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100">Digital Transformation</h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4 flex-grow">
            Guiding your journey through digital innovation, from adoption to full integration.
          </p>
          <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">
            Learn More <span aria-hidden="true">&rarr;</span>
          </a>
        </div>
      </article>

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

Mise en page de réservation de la grille dégradée

Un composant de mise en page de grille complexe et réactif pour les systèmes de réservation, avec des dégradés de couleurs triadiques, des transitions fluides et la prise en charge du mode sombre. Conçu avec plusieurs éléments interactifs.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-500 p-4 sm:p-6 md:p-8 lg:p-12 font-sans">

  <!-- Header Section -->
  <header class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500 dark:from-red-400 dark:via-yellow-300 dark:to-emerald-400 pb-2">
      Book Your Next Adventure
    </h1>
    <p class="mt-2 text-lg sm:text-xl text-gray-600 dark:text-gray-300">Seamless reservations, unforgettable experiences.</p>
  </header>

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

    <!-- Left Sidebar / Navigation (Col 1 md, Col 1-2 lg) -->
    <aside class="md:col-span-1 lg:col-span-2 p-6 rounded-3xl shadow-xl transform transition-all duration-300 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 bg-gradient-to-br from-indigo-50 dark:from-gray-800 to-white dark:to-gray-900 group relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-100 via-purple-100 to-green-100 dark:from-indigo-950 dark:via-purple-950 dark:to-green-950 opacity-20 group-hover:opacity-40 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-400 dark:to-purple-400">
          Categories
        </h2>
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-purple-600 dark:text-purple-400 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m-.707 5.657l.707.707M18.364 5.636l.707-.707M6.879 7.121A4 4 0 0112 5c2.21 0 4 1.79 4 4 0 1.27-.492 2.453-1.386 3.348L12 21l-2.614-7.652A4 4 0 018 9c0-2.21 1.79-4 4-4z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Adventures</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-yellow-600 dark:text-yellow-400 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4a2 2 0 012-2h4a2 2 0 012 2v4m-6 0h6m-6 0v-4m0-4.004H8m0 0v-2.004S10 10 12 10s4-2 4-2v2.004m-4-2.004V8m.004-2.004h-.008m.008 2.004h-.008m0 0v2.004M15 17h6l-3-3m0-4.004S18 10 16 10s-4-2-4-2v2.004M12 21h9m-9-4.004H15m0 0v-2.004S17 10 19 10s4-2 4-2v2.004m-4-2.004V8"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-yellow-700 dark:group-hover:text-yellow-300">Experiences</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-emerald-600 dark:text-emerald-400 mr-4 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300">Classes & Workshops</span>
            </a>
          </li>
          <!-- Add more categories -->
        </ul>
        <div class="mt-8">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-400 dark:to-orange-400 mb-4">Popular Searches</h3>
          <div class="flex flex-wrap gap-2">
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 transition-colors duration-300 hover:bg-red-200 dark:hover:bg-red-800 cursor-pointer shadow-sm">Hiking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 transition-colors duration-300 hover:bg-yellow-200 dark:hover:bg-yellow-800 cursor-pointer shadow-sm">Spa Days</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200 transition-colors duration-300 hover:bg-emerald-200 dark:hover:bg-emerald-800 cursor-pointer shadow-sm">Cooking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 transition-colors duration-300 hover:bg-indigo-200 dark:hover:bg-indigo-800 cursor-pointer shadow-sm">Photography</span>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content Area (Central Cards) (Col 1-3 md, Col 3-5 lg) -->
    <section class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Search/Filter Bar -->
      <div class="bg-gradient-to-r from-red-50 via-yellow-50 to-emerald-50 dark:from-gray-800 dark:via-gray-850 dark:to-gray-900 p-5 rounded-3xl shadow-xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all duration-300 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-red-100 via-yellow-100 to-emerald-100 dark:from-red-950 dark:via-yellow-950 dark:to-emerald-950 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
        <div class="relative z-10 w-full flex flex-col sm:flex-row gap-4">
          <input type="text" placeholder="Search activities or locations..." class="flex-grow p-3 rounded-full bg-white dark:bg-gray-700 border border-transparent focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600 focus:border-transparent transition-all duration-300 shadow-inner placeholder:text-gray-500 dark:placeholder:text-gray-400" />
          <button class="px-6 py-3 bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-700 dark:to-yellow-700 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <svg class="w-6 h-6 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>
        </div>
      </div>

      <!-- Booking Cards Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Card 1 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-red-200 dark:hover:border-red-700">
          <div class="absolute inset-0 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-950 dark:to-red-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=1" alt="Mountain Hiking" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-600 dark:from-red-400 dark:to-orange-400 mb-2">Alaskan Glacier Trek</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the breathtaking beauty of massive glaciers.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.9 (245 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$299</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-yellow-200 dark:hover:border-yellow-700">
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-100 to-yellow-50 dark:from-yellow-950 dark:to-yellow-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=2" alt="Cooking Class" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-400 dark:to-yellow-400 mb-2">Authentic Italian Cooking</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Master the art of pasta making and classic sauces.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.7 (180 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$85</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-emerald-200 dark:hover:border-emerald-700">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-100 to-emerald-50 dark:from-emerald-950 dark:to-emerald-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=3" alt="City Tour" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-emerald-600 dark:from-red-400 dark:to-emerald-400 mb-2">Historic City Walking Tour</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient landmarks and hidden gems with a local guide.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.8 (310 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$45</span>
              <button class="px-5 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 dark:from-emerald-600 dark:to-teal-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 4 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-violet-200 dark:hover:border-violet-700">
          <div class="absolute inset-0 bg-gradient-to-br from-violet-100 to-violet-50 dark:from-violet-950 dark:to-violet-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=4" alt="Yoga Retreat" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Serene Beach Yoga Retreat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Rejuvenate your mind and body by the ocean.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>5.0 (98 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$599</span>
              <button class="px-5 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 dark:from-purple-600 dark:to-indigo-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 5 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-blue-200 dark:hover:border-blue-700">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-950 dark:to-blue-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=5" alt="Scuba Diving" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-400 dark:to-cyan-400 mb-2">Deep Sea Scuba Diving</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover vibrant marine life in crystal clear waters.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.6 (155 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$180</span>
              <button class="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-600 dark:to-cyan-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- 'Load More' or Pagination -->
        <div class="md:col-span-3 lg:col-span-5 flex justify-center mt-4 w-full">
          <button class="px-8 py-4 bg-gradient-to-r from-yellow-500 to-emerald-500 dark:from-yellow-600 dark:to-emerald-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <svg class="w-6 h-6 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.072a2 2 0 012-2h4a2 2 0 002-2V6h2v2h4a2 2 0 012 2v2a8.001 8.001 0 00-15.356 2M4 20h16"></path></svg>
            Load More Activities
          </button>
        </div>

      </div>
    </section>

  </main>

  <!-- Footer Section (Optional, could be simplified) -->
  <footer class="mt-12 text-center text-gray-500 dark:text-gray-400 text-sm">
    <p>&copy; 2023 AdventureBook. All rights reserved.</p>
  </footer>

</div>

Composant de mise en page de grille de divertissement

Une grille épurée et minimaliste inspirée de la typographie suisse/internationale pour les plateformes de divertissement et de médias. Dispose d’une palette de couleurs triadique, d’une réactivité et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 py-8 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="container mx-auto">
    <div class="mb-8 text-center">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 dark:text-white mb-2">
        Featured Entertainment
      </h2>
      <p class="mt-2 text-lg leading-8 text-gray-600 dark:text-gray-300">
        Explore our curated selection of movies, shows, and more.
      </p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
      <!-- Item 1 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=1" alt="Movie Still 1" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Grand Adventure</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A captivating journey through uncharted territories. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.8</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=2" alt="Movie Still 2" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">City of Echoes</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A thrilling mystery unfolding in a futuristic cityscape. (2022)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.5</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=3" alt="Movie Still 3" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">Quantum Leap Series</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">Science fiction drama exploring alternate dimensions. (Series)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.9</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 4 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-orange-500 bg-opacity-10 dark:bg-orange-900 dark:bg-opacity-20 border border-orange-500 border-opacity-20 dark:border-orange-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=4" alt="Movie Still 4" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-orange-700 dark:text-orange-300 mb-1">The Whispering Woods</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">An eerie tale of supernatural events in a secluded forest. (2023)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-orange-600 dark:text-orange-400">⭐ 4.3</span>
            <a href="#" class="text-sm font-medium text-orange-700 dark:text-orange-300 hover:text-orange-900 dark:hover:text-orange-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 5 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-green-500 bg-opacity-10 dark:bg-green-900 dark:bg-opacity-20 border border-green-500 border-opacity-20 dark:border-green-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=5" alt="Movie Still 5" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-green-700 dark:text-green-300 mb-1">Cosmic Symphony</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A documentary exploring the mysteries of the universe. (2021)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-green-600 dark:text-green-400">⭐ 4.7</span>
            <a href="#" class="text-sm font-medium text-green-700 dark:text-green-300 hover:text-green-900 dark:hover:text-green-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>

      <!-- Item 6 -->
      <div class="relative group rounded-lg overflow-hidden shadow-lg dark:shadow-xl bg-purple-500 bg-opacity-10 dark:bg-purple-900 dark:bg-opacity-20 border border-purple-500 border-opacity-20 dark:border-purple-900 dark:border-opacity-30 p-2">
        <img src="https://picsum.photos/400/250?random=6" alt="Movie Still 6" class="w-full h-48 object-cover rounded-md transition-transform duration-300 group-hover:scale-105">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-1">The Last Code</h3>
          <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">A cyberpunk thriller set in a dystopian future. (2024)</p>
          <div class="flex justify-between items-center">
            <span class="text-sm font-medium text-purple-600 dark:text-purple-400">⭐ 4.6</span>
            <a href="#" class="text-sm font-medium text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100 transition-colors duration-200">Watch Now &rarr;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

ArtDecoEducationalGrid

Un composant de mise en page de grille complexe et réactif pour les plateformes éducatives, stylisé avec des motifs géométriques Art déco et de riches couleurs d’automne. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.

Ouvrir Aperçu

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

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

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

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

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

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

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

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

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

        </div>
      </section>

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

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

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

  </div>
</div>

Composant de mise en page de grille cyberpunk

Un composant de mise en page de grille simple et réactif avec une esthétique cyberpunk, adapté aux sites Web d’événements ou de conférences. Présente des arrière-plans sombres, des accents de néon lumineux et une palette de couleurs triadiques. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-950 dark:bg-black text-lime-400 dark:text-cyan-400 p-4 sm:p-8 font-mono">

  <!-- Grid Container -->
  <div class="max-w-6xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Header/Title Section (Spanning Columns) -->
    <div class="md:col-span-2 lg:col-span-3 mb-6">
      <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-fuchsia-500 dark:text-fuchsia-400 
        tracking-tight leading-tight text-center sm:text-left drop-shadow-[0_0_8px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_8px_rgba(236,72,153,0.5)]">
        // NEON NEXUS CONFERENCE <span class="text-lime-400 dark:text-cyan-400">2077</span>
      </h1>
      <p class="text-lg sm:text-xl text-gray-400 dark:text-gray-500 text-center sm:text-left mt-2 
        drop-shadow-[0_0_3px_rgba(163,230,53,0.3)] dark:drop-shadow-[0_0_3px_rgba(45,212,255,0.3)]">
        Unlocking the Future of Cybernetics & AI
      </p>
    </div>

    <!-- Grid Item 1 -->
    <div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700 
      shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg p-6 rounded-lg overflow-hidden
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10 
      before:animate-pulse before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-fuchsia-500 dark:text-fuchsia-400 mb-2 
          drop-shadow-[0_0_5px_rgba(236,72,153,0.7)] dark:drop-shadow-[0_0_5px_rgba(236,72,153,0.5)]">
          <span class="text-lime-400 dark:text-cyan-400">//</span> REGISTRATION OPEN
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Secure your spot for the premier event of the digital age. Limited slots available.</p>
        <a href="#" class="inline-block bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-fuchsia-400/50 dark:shadow-fuchsia-800/50 
          border border-fuchsia-400 dark:border-fuchsia-800">
          REGISTER NOW <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

    <!-- Grid Item 2 -->
    <div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600 
      shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10 
      before:animate-pulse before:delay-200 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2 
          drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> MEET THE SPEAKERS
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Visionaries and pioneers from the cutting edge of tech will share their insights.</p>
        <div class="flex -space-x-2 overflow-hidden mb-4">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker 1">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker 2">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-lime-400 dark:ring-cyan-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Speaker 3">
        </div>
        <a href="#" class="inline-block bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50 
          border border-lime-400 dark:border-cyan-800">
          VIEW ALL <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

    <!-- Grid Item 3 -->
    <div class="relative bg-gray-900 border border-cyan-500 dark:border-green-600 
      shadow-cyan-500/30 dark:shadow-green-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-2 lg:col-span-1
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-cyan-500/10 dark:before:bg-green-600/10 
      before:animate-pulse before:delay-400 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-cyan-500/50 dark:hover:shadow-green-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-cyan-400 dark:text-green-400 mb-2 
          drop-shadow-[0_0_5px_rgba(45,212,255,0.7)] dark:drop-shadow-[0_0_5px_rgba(74,222,128,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> EVENT SCHEDULE
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Don't miss a single byte! Plan your immersion into the future.</p>
        <ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 1: AI & Robotics Summit</li>
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 2: Cybernetics & Bio-Augmentation</li>
          <li class="flex items-center text-lime-300 dark:text-cyan-300"> <span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Day 3: Future of Digital Society</li>
        </ul>
        <a href="#" class="inline-block mt-4 bg-cyan-600 hover:bg-cyan-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
          transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
          shadow-inner shadow-cyan-400/50 dark:shadow-green-800/50 
          border border-cyan-400 dark:border-green-800">
          FULL SCHEDULE <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>
    
    <!-- Grid Item 4 (Image Placeholder) -->
    <div class="relative bg-gray-900 border border-fuchsia-600 dark:border-fuchsia-700 
      shadow-fuchsia-500/30 dark:shadow-fuchsia-700/20 shadow-lg rounded-lg overflow-hidden md:col-span-1 lg:col-span-1
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-fuchsia-500/10 dark:before:bg-fuchsia-700/10 
      before:animate-pulse before:delay-600 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-fuchsia-500/50">
      <div class="relative z-10">
        <img src="https://picsum.photos/600/400?random=1" alt="Cyberpunk Cityscape" class="w-full h-auto object-cover rounded-md border border-fuchsia-500 dark:border-fuchsia-700 shadow-xl shadow-fuchsia-500/20 dark:shadow-fuchsia-700/10">
        <div class="p-4">
          <p class="text-sm text-gray-400 dark:text-gray-500 text-center">Connect, learn, innovate. #NeonNexus</p>
        </div>
      </div>
    </div>

    <!-- Grid Item 5 (Contact/Location) -->
    <div class="relative bg-gray-900 border border-lime-500 dark:border-cyan-600 
      shadow-lime-500/30 dark:shadow-cyan-700/20 shadow-lg p-6 rounded-lg overflow-hidden md:col-span-1 lg:col-span-2
      before:content-[''] before:absolute before:inset-0 before:blur-sm before:bg-lime-500/10 dark:before:bg-cyan-600/10 
      before:animate-pulse before:delay-800 before:duration-1000 before:z-0 transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-lime-500/50 dark:hover:shadow-cyan-500/50">
      <div class="relative z-10">
        <h2 class="text-2xl font-bold text-lime-400 dark:text-cyan-400 mb-2 
          drop-shadow-[0_0_5px_rgba(163,230,53,0.7)] dark:drop-shadow-[0_0_5px_rgba(45,212,255,0.5)]">
          <span class="text-fuchsia-500 dark:text-fuchsia-400">//</span> GHOST CITY LOCALE
        </h2>
        <p class="text-base text-gray-300 dark:text-gray-400 mb-4">Experience the future in the heart of Neo-Tokyo virtual district.</p>
        <ul class="list-none space-y-2 text-gray-200 dark:text-gray-300">
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Virtual Venue: 'The Glitch' - Sector 7</li>
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Dates: Nov 20-22, 2077</li>
          <li class="flex items-center text-cyan-300 dark:text-green-300"><span class="mr-2 text-fuchsia-400 text-lg">&#8227;</span> Contact: <a href="mailto:[email protected]" class="underline hover:text-white">[email protected]</a></li>
        </ul>
        <a href="#" class="inline-block mt-4 bg-lime-600 hover:bg-lime-700 text-gray-900 font-semibold py-2 px-4 rounded-md 
        transition-colors duration-300 transform scale-100 hover:scale-[1.05] 
        shadow-inner shadow-lime-400/50 dark:shadow-cyan-800/50 
        border border-lime-400 dark:border-cyan-800">
          GET DIRECTIONS <span class="ml-1 text-xs">>>></span>
        </a>
      </div>
    </div>

  </div>

  <!-- Footer (Optional) -->
  <footer class="mt-12 text-center text-gray-600 dark:text-gray-700 text-sm">
    <p>&copy; 2077 Neon Nexus. All Digital Rights Reserved.</p>
  </footer>

</div>

Watercolor_Artistic_Dashboard_Grid_Layout

Un composant de mise en page de grille de tableau de bord réactif avec une esthétique aquarelle/artistique, utilisant une palette de couleurs monochromatique. Les fonctionnalités incluent des cartes avec des arrière-plans doux, des ombres subtiles et la prise en charge du mode sombre pour la visualisation des données et les panneaux de contrôle.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950 p-4 sm:p-6 font-sans">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-purple-800 dark:text-purple-300 mb-8 sm:mb-12 text-center drop-shadow-lg leading-tight">
      <span class="block">Artistic Dashboard</span>
      <span class="block text-2xl sm:text-3xl font-light text-purple-600 dark:text-purple-400 mt-2">Creative Insights</span>
    </h1>

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

      <!-- Card 1: Sales Overview -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-2 relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-purple-300/50 to-indigo-200/50 dark:from-fuchsia-950/20 dark:via-purple-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Global Sales Performance</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Interactive sales data across all regions.</p>
          <div class="flex-grow min-h-[150px] sm:min-h-[200px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm italic overflow-hidden shadow-inner">
            <img src="https://picsum.photos/600/300?random=1" alt="Sales Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-4xl font-extrabold text-purple-900 dark:text-purple-200">$1.2M</span>
            <span class="text-green-600 dark:text-green-400 font-semibold text-lg flex items-center">
              <svg class="w-6 h-6 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414L10.586 3.707a1 1 0 011.414 0l5.293 5.293a1 1 0 01-1.414 1.414L11 6.414V16a1 1 0 11-2 0V6.414L5.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
              +12% <span class="hidden sm:inline-block ml-1">this month</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 2: User Engagement -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-75"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">User Engagement</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Metrics for active users and session times.</p>
          <div class="flex-grow min-h-[120px] bg-purple-100/50 dark:bg-purple-800/50 rounded-xl flex items-center justify-center text-purple-500 dark:text-purple-400 text-sm overflow-hidden shadow-inner">
            <img src="https://picsum.photos/300/200?random=2" alt="User Engagement Chart" class="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all duration-500 rounded-xl">
          </div>
          <div class="mt-6 flex justify-between items-center">
            <span class="text-3xl font-extrabold text-purple-900 dark:text-purple-200">50K</span>
            <span class="text-orange-500 dark:text-orange-400 font-semibold text-md flex items-center">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              -3% <span class="hidden sm:inline-block ml-1">last week</span>
            </span>
          </div>
        </div>
      </div>

      <!-- Card 3: Project Status -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-150"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Project Status</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Overview of current project milestones.</p>
          <ul class="flex-grow space-y-3">
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-green-400 dark:bg-green-600 w-3 h-3 rounded-full mr-3 border border-green-500 dark:border-green-700"></span>
              <span>Feature X Development <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">80%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-yellow-400 dark:bg-yellow-600 w-3 h-3 rounded-full mr-3 border border-yellow-500 dark:border-yellow-700"></span>
              <span>Marketing Campaign Launch <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">45%</strong></span>
            </li>
            <li class="flex items-center text-purple-700 dark:text-purple-300 border border-purple-200/50 dark:border-purple-800/50 p-3 rounded-xl bg-purple-100/50 dark:bg-purple-800/50 shadow-inner group-hover:scale-[1.01] transition-transform duration-200">
              <span class="bg-blue-400 dark:bg-blue-600 w-3 h-3 rounded-full mr-3 border border-blue-500 dark:border-blue-700"></span>
              <span>New User Onboarding Flow <strong class="font-semibold ml-2 text-purple-900 dark:text-purple-100">95%</strong></span>
            </li>
          </ul>
          <button class="mt-6 w-full py-3 px-4 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Projects
          </button>
        </div>
      </div>

      <!-- Card 4: Recent Activities -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-fuchsia-200/50 via-indigo-200/50 to-pink-200/50 dark:from-fuchsia-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-225"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Recent Activities</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Latest updates and notifications.</p>
          <div class="flex-grow space-y-4">
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">John D. <span class="font-normal text-purple-600 dark:text-purple-400">completed task UI Revamp</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">2 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Jane S. <span class="font-normal text-purple-600 dark:text-purple-400">added 3 new reports</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">5 hours ago</p>
              </div>
            </div>
            <div class="flex items-start">
              <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4 border-2 border-purple-300 dark:border-purple-700 shadow-sm">
              <div>
                <p class="text-purple-800 dark:text-purple-200 font-semibold">Mike R. <span class="font-normal text-purple-600 dark:text-purple-400">commented on 'Analytics Bug'</span></p>
                <p class="text-sm text-purple-500 dark:text-purple-400">Yesterday</p>
              </div>
            </div>
          </div>
          <button class="mt-6 w-full py-3 px-4 bg-purple-200 dark:bg-purple-700 text-purple-800 dark:text-purple-200 font-semibold rounded-xl hover:bg-purple-300 dark:hover:bg-purple-800 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5">
            View All Activities
          </button>
        </div>
      </div>

      <!-- Card 5: Performance Metrics (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-200/50 via-pink-200/50 to-fuchsia-200/50 dark:from-indigo-950/20 dark:via-pink-950/20 dark:to-fuchsia-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-300"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Load Speed</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Current dashboard load time.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-blue-500 dark:text-blue-400 drop-shadow-md">1.8s</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Compared to 2.1s last month</p>
        </div>
      </div>

      <!-- Card 6: Customer Feedback (Small) -->
      <div class="relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-200/50 via-fuchsia-200/50 to-indigo-200/50 dark:from-pink-950/20 dark:via-fuchsia-950/20 dark:to-indigo-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-375"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl font-bold text-purple-800 dark:text-purple-300 mb-4">Feedback Score</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6">Average customer satisfaction.</p>
          <div class="flex-grow flex items-center justify-center">
            <p class="text-6xl font-extrabold text-yellow-500 dark:text-yellow-400 drop-shadow-md">4.7</p>
          </div>
          <p class="text-sm text-purple-500 dark:text-purple-400 text-center mt-auto">Out of 5 stars</p>
        </div>
      </div>

      <!-- Card 7: Resource Utilization (Large) -->
      <div class="col-span-full md:col-span-2 lg:col-span-2 xl:col-span-full relative bg-purple-50/70 dark:bg-purple-900/70 backdrop-blur-sm rounded-3xl p-6 sm:p-8 overflow-hidden shadow-xl dark:shadow-purple-700/20 group transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-purple-700/40 border border-purple-100 dark:border-purple-800">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-200/50 via-indigo-200/50 to-pink-200/50 dark:from-purple-950/20 dark:via-indigo-950/20 dark:to-pink-950/20 opacity-80 z-0 rounded-3xl -m-1 animate-pulse-background delay-450"></div>
        <div class="relative z-10 flex flex-col h-full">
          <h2 class="text-2xl sm:text-3xl font-bold text-purple-800 dark:text-purple-300 mb-4">Server Resource Utilization</h2>
          <p class="text-purple-600 dark:text-purple-400 mb-6 text-lg">Live monitoring of CPU, Memory, and Disk usage.</p>
          <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 flex-grow">
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">CPU Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-blue-400 dark:bg-blue-500 h-4 rounded-full" style="width: 65%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">65% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Memory Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-green-400 dark:bg-green-500 h-4 rounded-full" style="width: 40%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">40% Used</p>
            </div>
            <div class="bg-purple-100/50 dark:bg-purple-800/50 rounded-xl p-4 shadow-inner">
              <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-300 mb-2">Disk Usage</h3>
              <div class="w-full bg-purple-200 dark:bg-purple-700 rounded-full h-4 mb-2">
                <div class="bg-red-400 dark:bg-red-500 h-4 rounded-full" style="width: 88%;"></div>
              </div>
              <p class="text-purple-600 dark:text-purple-400 text-sm">88% Used</p>
            </div>
          </div>
          <button class="mt-8 py-3 px-6 bg-purple-500 dark:bg-purple-600 text-white font-semibold rounded-xl hover:bg-purple-600 dark:hover:bg-purple-700 transition-colors duration-300 shadow-md transform hover:-translate-y-0.5 self-center">
            Detailed Analytics
          </button>
        </div>
      </div>

    </div>
  </div>

  <style>
    @keyframes pulse-background {
      0% { opacity: 0.8; transform: scale(1); }
      50% { opacity: 0.9; transform: scale(1.01); }
      100% { opacity: 0.8; transform: scale(1); }
    }

    .animate-pulse-background {
      animation: pulse-background 8s ease-in-out infinite alternate;
    }

    .delay-75 { animation-delay: 0.75s; }
    .delay-150 { animation-delay: 1.5s; }
    .delay-225 { animation-delay: 2.25s; }
    .delay-300 { animation-delay: 3s; }
    .delay-375 { animation-delay: 3.75s; }
    .delay-450 { animation-delay: 4.5s; }
  </style>
</div>

Grille de soins de santé vibrante inspirée du papier

Un composant de mise en page de grille simple, inspiré du papier/de l’impression avec des couleurs vives, conçu pour les applications médicales/de santé. Il est entièrement réactif, inclut la prise en charge du mode sombre et utilise le HTML sémantique.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-purple-950 dark:via-indigo-950 dark:to-blue-950 font-sans">

  <div class="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-indigo-500 dark:border-indigo-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/1005/60/60" alt="Microscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-indigo-700 dark:text-indigo-400 ml-4">Lab Results</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Access your latest diagnostic reports and detailed analysis from our state-of-the-art laboratory.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800">
          View Details
          <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 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>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-sky-500 dark:border-sky-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-sky-100 to-cyan-100 dark:from-sky-900 dark:to-cyan-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/177/60/60" alt="Pills and Stethoscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-sky-700 dark:text-sky-400 ml-4">Medication Refills</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Easily request prescription refills and manage your current medication schedule online.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-sky-600 hover:bg-sky-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-800">
          Order Refill
          <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 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>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-emerald-500 dark:border-emerald-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-emerald-100 to-lime-100 dark:from-emerald-900 dark:to-lime-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/453/60/60" alt="Heart Monitor" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-400 ml-4">Health Records</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Keep track of your complete medical history, immunizations, and past appointments securely.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800">
          Access Records
          <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 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>

  </div>
</div>

Grille CRM Cyberpunk

Un composant de mise en page de grille réactif pour les outils CRM/Business avec une esthétique néon cyberpunk-futuriste, avec des arrière-plans sombres et des couleurs chaudes d’accent de coucher de soleil. Comprend des éléments interactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-950 text-orange-200 p-4 sm:p-6 lg:p-8 font-mono dark:bg-gray-950 dark:text-orange-200">

  <!-- Header/Title Section -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-orange-400 mb-2 drop-shadow-xl shadow-orange-500/50 dark:text-orange-400">
      <span class="animate-pulse-slow">CYBERNETIC</span> DECK // <span class="text-orange-500">CRM_OPS</span>
    </h1>
    <p class="text-lg sm:text-xl text-yellow-300 dark:text-yellow-300">Enhanced Customer Interface Protocol</p>
  </div>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min">

    <!-- Customer Overview Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
        CLIENT PROFILES
      </h2>
      <p class="text-sm text-yellow-200 mb-4 z-10 relative">Active customer profiles and recent interactions.</p>
      <ul class="space-y-3 z-10 relative">
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">NeoTech Dynamics</p>
            <p class="text-xs text-yellow-400">Last login: 2 days ago</p>
          </div>
          <span class="text-xs text-green-400">+1.2%</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">Synaptic Nexus Corp</p>
            <p class="text-xs text-yellow-400">New lead: 5 hours ago</p>
          </div>
          <span class="text-xs text-yellow-400">New</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">Quantum Robotics</p>
            <p class="text-xs text-yellow-400">Upcoming meeting</p>
          </div>
          <span class="text-xs text-red-400">-0.5%</span>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View All Customers</button>
    </div>

    <!-- Sales Performance Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
        SALES OVERVIEW
      </h2>
      <div class="text-center mb-4 z-10 relative">
        <p class="text-4xl font-bold text-orange-300 mb-1"><span class="text-yellow-400">$</span>128,450</p>
        <p class="text-sm text-yellow-200">Revenue this cycle</p>
      </div>
      <div class="relative w-full h-32 bg-gray-800/70 rounded-md p-2 mb-4 z-10 relative">
        <!-- Placeholder for a more complex chart (e.g., SVG or image) -->
        <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="w-full h-full object-cover rounded-md opacity-70 group-hover:opacity-90 transition-opacity duration-300" />
        <div class="absolute inset-0 flex items-center justify-center text-orange-400 font-bold text-sm leading-none">[ANALYTICS FEED]</div>
      </div>
      <div class="flex justify-between text-sm z-10 relative">
        <div>
          <p class="text-yellow-400">Avg Deal:</p>
          <p class="text-orange-300">$2,560</p>
        </div>
        <div>
          <p class="text-yellow-400">Conversion:</p>
          <p class="text-orange-300">18.3%</p>
        </div>
        <div>
          <p class="text-yellow-400">Growth:</p>
          <p class="text-green-400">+4.7%</p>
        </div>
      </div>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Deep Dive Analytics</button>
    </div>

    <!-- Interactive Task Management Card - Span 2 columns on larger screens -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden lg:col-span-2 group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        TASK_FLOW CONTROL
      </h2>
      <div class="flex flex-col sm:flex-row gap-4 mb-4 z-10 relative">
        <input type="text" placeholder="New task description..." class="flex-1 bg-gray-800 border border-orange-700 px-4 py-2 rounded-md text-orange-200 placeholder-yellow-300/50 focus:outline-none focus:ring-2 focus:ring-orange-500" />
        <button class="bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 px-5 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200">Add Task</button>
      </div>
      <ul class="space-y-3 z-10 relative">
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer" checked>
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold line-through">Finalize Q3 Synergy Report</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-26</p>
          </div>
          <span class="text-xs text-green-400">Completed</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold">Client Call: Project Alpha Status</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-28 <span class="text-red-400">[PRIORITY]</span></p>
          </div>
          <span class="text-xs text-yellow-400">Pending</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold">Review CRM Logs for Anomaly 7</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-29</p>
          </div>
          <span class="text-xs text-yellow-400">Pending</span>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Manage All Tasks</button>
    </div>

    <!-- Quick Stats Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.883 11.232C17.265 10.485 16.29 10 15 10c-1.396 0-2.584.279-3.522.687L9 11.232V14.5A.5.5 0 018.5 15h-2a.5.5 0 01-.5-.5V8.216A.5.5 0 016.146 7.785l.775-.775C7.309 6.275 8.04 6 9 6c.71 0 1.34.162 1.895.424L12 7.375V11a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-4.883c.969-.344 2.148-.595 3.52-.595 1.765 0 3.23.513 4.143 1.258l-.634.789c-.5-.402-1.3-.647-2.274-.647-1.127 0-2.12.39-2.828.98L13 13h-2v3a1 1 0 001 1h4a1 1 0 001-1v-5.285c.618-.466 1.07-1.077 1.383-1.815z"></path></svg>
        SYSTEM STATUS
      </h2>
      <div class="text-sm space-y-3 z-10 relative">
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Client Connections:</span>
          <span class="text-orange-300 font-bold">482_online</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Data Traffic:</span>
          <span class="text-orange-300 font-bold">~1.2 TB/hr</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Server Latency:</span>
          <span class="text-green-400 font-bold">&lt;50ms</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Active Sessions:</span>
          <span class="text-orange-300 font-bold">127</span>
        </div>
      </div>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Run Diagnostics</button>
    </div>

    <!-- Recent Activities Feed Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        ACTIVITY LOG
      </h2>
      <ul class="space-y-3 text-sm z-10 relative">
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-green-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">User 'JADE_OPS'</span> updated lead status for <span class="text-orange-400">'Project Chimera'</span>.</p>
            <p class="text-xs text-yellow-400">15 minutes ago</p>
          </div>
        </li>
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-blue-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">System_Bot_RX</span> initiated data backup protocol.</p>
            <p class="text-xs text-yellow-400">1 hour ago</p>
          </div>
        </li>
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-red-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">Client 'NeuralNet Inc.'</span> payment processing FAILED. Alert issued.</p>
            <p class="text-xs text-yellow-400">3 hours ago</p>
          </div>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View Full Log</button>
    </div>

  </div>

  <!-- Footer/System Info -->
  <div class="mt-8 text-center text-yellow-500/70 text-sm">
    <p>© 2077 CyberCorp Solutions. All rights reserved. // <span class="text-orange-600">SECURE_CHANNEL_ACTIVE</span></p>
  </div>

  <!-- Tailwind JIT compatibility (not part of component, but useful for dev) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 3s infinite ease-in-out;
    }
  </style>

</div>

Course_Grid_Layout_Component

Un composant de mise en page de grille réactif et visuellement attrayant pour les plates-formes éducatives, avec des cartes de cours avec des tons chauds de coucher de soleil, des ombres Material Design et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-orange-50 to-amber-100 py-12 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-800 mb-8 text-center dark:text-amber-300">
      Explore Our Courses
    </h2>
    <p class="text-lg text-orange-700 mb-12 text-center max-w-2xl mx-auto dark:text-gray-300">
      Dive into a world of knowledge with our expertly curated courses. From foundational concepts to advanced topics, there's always something new to learn.
    </p>

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

      <!-- Course Card 1 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=1" alt="Course thumbnail - Web Development Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Web Development Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn the essentials of HTML, CSS, and JavaScript to build your first websites. Perfect for beginners!</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.8 (1,234 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 2 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=2" alt="Course thumbnail - Data Science Essentials" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Data Science Essentials</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Uncover the power of data analysis, statistics, and machine learning algorithms using Python.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.9 (987 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 3 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=3" alt="Course thumbnail - Mobile App Development" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Mobile App Development with React Native</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Build cross-platform mobile applications for iOS and Android using a single codebase.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.7 (765 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Emily White</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 4 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=4" alt="Course thumbnail - Digital Marketing Strategy" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Digital Marketing Strategy</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Master SEO, social media, content marketing, and paid advertising to boost online presence.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.6 (1,012 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">David Lee</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 5 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=5" alt="Course thumbnail - UI/UX Design Fundamentals" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">UI/UX Design Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Craft intuitive and beautiful user interfaces and experiences with design principles.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.9 (890 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Chris Green</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 6 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=6" alt="Course thumbnail - Cloud Computing Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cloud Computing Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Get started with cloud platforms like AWS, Azure, and Google Cloud, covering core services.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.7 (654 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Olivia Brown</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 7 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=7" alt="Course thumbnail - Cybersecurity Introduction" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cybersecurity Intro</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Understand common cyber threats and how to protect systems and data from attacks.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.5 (501 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/13.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Robert Hall</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 8 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=8" alt="Course thumbnail - Project Management Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Project Management PMBOK</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn agile methodologies, project planning, execution, and risk management.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-orange-500 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.8 (1,500 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/14.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Sophia Clark</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

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