Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Skeuomorphic_Earth_Tone_Data_Table

Un tableau de données simple et réactif avec un style de conception skeuomorphe et une palette de couleurs terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="bg-stone-300 dark:bg-stone-800 shadow-md shadow-stone-400/50 dark:shadow-stone-950/50 rounded-xl p-4 sm:p-6 mb-8
                border-t border-l border-stone-200 dark:border-stone-700
                border-b border-r border-stone-400 dark:border-stone-900
                inset-shadow-light dark:inset-shadow-dark">
      <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4
                 text-shadow-light dark:text-shadow-dark">
        Project Overview
      </h2>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-relaxed">
        This table displays key metrics and status for ongoing projects. Each row represents a project with its current status, budget, and completion rate.
      </p>
    </div>

    <div class="overflow-x-auto relative rounded-xl shadow-lg shadow-stone-400/50 dark:shadow-stone-950/50
                border-t border-l border-stone-200 dark:border-stone-700
                border-b border-r border-stone-400 dark:border-stone-900
                inset-shadow-light dark:inset-shadow-dark">
      <table class="w-full text-sm text-left text-stone-500 dark:text-stone-400">
        <thead class="text-xs text-stone-700 uppercase bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
                      rounded-t-lg
                      border-b border-stone-500 dark:border-stone-900
                      table-header-shadow">
          <tr>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Project Name
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden md:table-cell">
              Manager
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Status
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden sm:table-cell">
              Budget
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden lg:table-cell">
              Completion
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Website Redesign
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
                <span>Jane Doe</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100 
                           shadow-sm-light dark:shadow-sm-dark">
                Completed
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $25,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-emerald-600 h-2.5 rounded-full" style="width: 100%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Mobile App Development
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <span>John Smith</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
                           shadow-sm-light dark:shadow-sm-dark">
                In Progress
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $75,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 60%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Marketing Campaign
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <span>Emily White</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100
                           shadow-sm-light dark:shadow-sm-dark">
                Planned
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $30,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Q1 Financial Report
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Avatar">
                <span>David Lee</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
                           shadow-sm-light dark:shadow-sm-dark">
                In Progress
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $10,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 85%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Base for defining custom CSS variables for skeuomorphic effects */
  :root {
    --shadow-light-color-1: rgba(255, 255, 255, 0.7);
    --shadow-light-color-2: rgba(0, 0, 0, 0.2);
    --shadow-dark-color-1: rgba(0, 0, 0, 0.7);
    --shadow-dark-color-2: rgba(255, 255, 255, 0.05);
  }

  /* Light mode shadows */
  .inset-shadow-light {
    box-shadow: inset -2px -2px 5px var(--shadow-light-color-1),
                inset 2px 2px 5px var(--shadow-light-color-2);
  }
  .shadow-sm-light {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(255, 255, 255, 0.5);
  }
  .shadow-inset-light {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), inset -1px -1px 2px rgba(255, 255, 255, 0.5);
  }
  .text-shadow-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.1);
  }
  .table-header-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06),
                0 2px 2px rgba(255, 255, 255, 0.5) inset;
  }
  .hover-button-inset-light {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.7);
  }
  .hover-button-inset-light:hover {
    box-shadow: inset 2px 2px 5px var(--shadow-light-color-2),
                inset -2px -2px 5px var(--shadow-light-color-1);
  }

  /* Dark mode shadows using custom properties */
  .dark .inset-shadow-dark {
    box-shadow: inset -2px -2px 5px var(--shadow-dark-color-1),
                inset 2px 2px 5px var(--shadow-dark-color-2);
  }
  .dark .shadow-sm-dark {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), -1px -1px 3px rgba(255, 255, 255, 0.05);
  }
  .dark .shadow-inset-dark {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.8), inset -1px -1px 2px rgba(255, 255, 255, 0.05);
  }
  .dark .text-shadow-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.1);
  }
  .dark .table-header-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3),
                0 2px 2px rgba(0, 0, 0, 0.7) inset;
  }
  .dark .hover-button-inset-dark {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.05);
  }
  .dark .hover-button-inset-dark:hover {
    box-shadow: inset 2px 2px 5px var(--shadow-dark-color-2),
                inset -2px -2px 5px var(--shadow-dark-color-1);
  }

  /* Define custom colors */
  .text-brown-600 {
    color: #795548; /* A warm brown */
  }
  .dark .text-brown-400 {
    color: #a1887f; /* A lighter warm brown for dark mode */
  }



</style>

Cyberpunk_Portfolio_Navigation

Un composant de navigation complexe et réactif sur le thème du cyberpunk pour un portfolio, avec une esthétique futuriste violet néon, des arrière-plans sombres et des éléments interactifs. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <header class="bg-zinc-950 text-purple-400 shadow-lg shadow-purple-900/50 dark:bg-zinc-900 dark:text-purple-300 dark:shadow-purple-700/30 font-mono tracking-wide relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between lg:py-4">
    <a href="#" class="flex items-center space-x-2 group">
      <svg class="h-8 w-8 text-purple-600 group-hover:text-purple-400 transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M19.5 10l.91-1m-1.54-5.5l.01-.01M7.05 12.05l-.01-.01M2.27 14L4 15.5l.65-.65V18l2-2v-.65l.65-.65H11l-.45-.45-1.07-1.07M12 17.25L10.5 16ZM6 10V6l1-1h6l1 1v4l-1 1H7l-1-1zm4.75-5l-.5-.5L4 8.75l-.5.5L7 12.25l.5.5zM12.25 17.25L16 13.5l.5-.5L12.25 9.75l-.5-.5zM17 10V6l1-1h6l1 1v4l-1 1h-6l-1-1z" />
      </svg>
      <span class="text-2xl font-bold text-purple-500 group-hover:text-purple-300 transition-colors duration-300">[SYNAPTIC]</span>
    </a>

    <nav class="hidden lg:flex space-x-8">
      <a href="#projects" class="text-lg relative group overflow-hidden py-1 leading-none">
        Projects
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#skills" class="text-lg relative group overflow-hidden py-1 leading-none">
        Skills
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#experience" class="text-lg relative group overflow-hidden py-1 leading-none">
        Experience
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#contact" class="text-lg relative group overflow-hidden py-1 leading-none">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
    </nav>

    <div class="flex items-center space-x-4">
      <!-- Dark Mode Toggle (placeholder for JS functionality) -->
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
      </button>

      <!-- Mobile Menu Button -->
      <button aria-label="Open menu" class="lg:hidden p-2 rounded-md bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, would be toggled by JS) -->
  <div class="lg:hidden absolute top-full left-0 w-full bg-zinc-900 border-t border-purple-800 shadow-xl shadow-purple-900/50 dark:bg-zinc-800 dark:border-purple-700 dark:shadow-purple-700/30 overflow-hidden" style="max-height: 0; transition: max-height 0.4s ease-out;">
    <nav class="flex flex-col p-4 space-y-3">
      <a href="#projects" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Projects</a>
      <a href="#skills" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Skills</a>
      <a href="#experience" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Experience</a>
      <a href="#contact" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Contact</a>
    </nav>
    <div class="flex justify-center p-4 border-t border-purple-800 dark:border-purple-700">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Developer Avatar" class="w-16 h-16 rounded-full border-2 border-purple-600 shadow-md shadow-purple-700/50 object-cover">
    </div>
  </div>
</header>

Ajouter au panier Composant du bouton

Un composant complexe de bouton « ajouter au panier » pour les applications médicales/de soins de santé, inspiré de la typographie suisse/internationale et des tons de terre. Il présente un design épuré et minimaliste qui met l’accent sur la typographie et les systèmes de grille, offrant une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8">

  <!-- Component Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl mx-auto rounded-lg shadow-xl overflow-hidden
              bg-white dark:bg-gray-800
              border border-gray-200 dark:border-gray-700
              transition-colors duration-300 ease-in-out">

    <!-- Product Header -->
    <div class="p-4 sm:p-5 md:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-1
                 font-sans tracking-wide">
        MediKit Essential
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-light">
        Advanced Diagnostic & First Aid Kit
      </p>
    </div>

    <!-- Product Image and Details -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 p-4 sm:p-5 md:p-6">
      <!-- Product Image -->
      <div class="relative rounded-md overflow-hidden aspect-video sm:aspect-square flex items-center justify-center bg-gray-100 dark:bg-gray-700">
        <img src="https://picsum.photos/600/400?random=10" alt="MediKit Essential Product Image" class="w-full h-full object-cover" loading="lazy">
        <span class="absolute top-2 left-2 px-3 py-1 bg-amber-600/90 dark:bg-amber-700/90 text-white text-xs font-bold rounded-full shadow-md">
          <span class="hidden sm:inline">Limited </span>Stock
        </span>
      </div>

      <!-- Product Details -->
      <div class="flex flex-col justify-between">
        <div>
          <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 mb-2
             font-sans tracking-tight">
            <span class="line-through text-gray-400 dark:text-gray-500 mr-2 text-base sm:text-lg">$119.99</span>
            $99.99
          </p>
          <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1 mb-4">
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              FDA Approved
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2d00/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              CE Certified
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              2-Year Warranty
            </li>
          </ul>
        </div>

        <!-- Quantity Selector -->
        <div class="flex items-center justify-between mb-4 mt-auto">
          <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-sans">Quantity:</label>
          <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
            <button aria-label="Decrease quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              −
            </button>
            <input type="number" id="quantity" value="1" min="1" max="10" aria-live="polite"
                   class="w-12 text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium
                          text-sm border-x border-gray-300 dark:border-gray-600 outline-none
                          focus:ring-0 appearance-none [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
            <button aria-label="Increase quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              +
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="p-4 sm:p-5 md:p-6 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">

      <button aria-label="Add to Cart" class="relative w-full py-3 px-4 rounded-md shadow-md
                  bg-green-700 dark:bg-green-600 text-white font-semibold text-base sm:text-lg
                  hover:bg-green-800 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
        <span>Add to Cart</span>
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs opacity-70 hidden md:block">
          ($99.99)
        </span>
      </button>

      <button aria-label="Buy Now" class="w-full py-3 px-4 rounded-md shadow-md
                  bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold text-base sm:text-lg
                  hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600
                  focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2m-13-2l4 4m0 0l4-4m-4 4V3"></path></svg>
        <span>Buy Now</span>
      </button>

    </div>

    <!-- Information Section (Optional) -->
    <div class="p-4 sm:p-5 md:p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
        <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400 flex-shrink-0" 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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c0 3.037 1.282 5.767 3.322 7.749L12 21.051l5.75-2.289C20.713 17.514 22 14.887 22 12c0-2.887-1.287-5.514-3.37-7.468z"></path></svg>
        <span>Secure Checkout Guaranteed. Orders ship within 24 hours.</span>
      </div>
    </div>

  </div>
</div>

Monospace_Developer_Simple_Finance_Navigation

Un composant de navigation simple, épuré et inspiré du code pour les interfaces financières/bancaires, avec des polices monospaces, des tons chauds de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <nav class="bg-orange-500 dark:bg-gray-900 shadow-md font-mono">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-orange-900 dark:text-orange-400 text-2xl font-bold tracking-tight">FIJI.DEV</a>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Dashboard</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Transactions</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Accounts</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="p-1 rounded-full text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-orange-600 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white transition-colors duration-200">
            <span class="sr-only">View notifications</span>
            <!-- Heroicon bell -->
            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </button>

          <!-- Profile dropdown -->
          <div class="ml-3 relative">
            <div>
              <button type="button" class="max-w-xs bg-orange-600 dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="sr-only">Open user menu</span>
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
              </button>
            </div>
            <!--
              Dropdown menu, show/hide based on menu state.

              Entering: "transition ease-out duration-100"
                From: "transform opacity-0 scale-95"
                To: "transform opacity-100 scale-100"
              Leaving: "transition ease-in duration-75"
                From: "transform opacity-100 scale-100"
                To: "transform opacity-0 scale-95"
            -->
            <!-- Placeholder for dropdown content, not implemented as per JSON requirement for pure HTML/CSS -->
          </div>
        </div>
      </div>
      <!-- Mobile menu button -->
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-orange-600 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon hamburger menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon close menu -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. Only for layout demonstration; requires JS to toggle. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Dashboard</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Transactions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Accounts</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
    </div>
    <div class="pt-4 pb-3 border-t border-orange-700 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-orange-900 dark:text-white">John Doe</div>
          <div class="text-sm font-medium leading-none text-orange-800 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 bg-orange-600 dark:bg-gray-800 p-1 rounded-full text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white transition-colors duration-200">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </button>
      </div>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Sign out</a>
      </div>
    </div>
  </div>
</nav>

Memphis_Vibrant_Marketplace_Dropdown_Menu

Un composant de menu déroulant complexe et réactif pour une place de marché, conçu avec une esthétique vibrante de style Memphis. Dispose de couleurs vives, de formes géométriques et d’une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-full border-4 border-yellow-400 dark:border-yellow-500 shadow-lg px-6 py-3 bg-fuchsia-500 text-lg font-extrabold text-white hover:bg-fuchsia-600 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg lg:text-xl" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <svg class="-mr-1 ml-3 h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-3 w-72 md:w-80 lg:w-96 rounded-3xl shadow-xl bg-gradient-to-br from-violet-500 to-pink-500 dark:from-violet-700 dark:to-pink-700 ring-4 ring-orange-400 dark:ring-orange-600 ring-offset-4 ring-offset-blue-300 dark:ring-offset-blue-900 focus:outline-none overflow-hidden transform scale-100 opacity-100 transition ease-out duration-300" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-2" role="none">
      <!-- Search Bar -->
      <div class="px-4 py-2 mb-2">
        <input type="text" placeholder="Search categories..." class="w-full p-3 rounded-xl border-2 border-indigo-400 dark:border-indigo-600 bg-white bg-opacity-90 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-300 dark:focus:ring-violet-500 transition duration-200 text-base sm:text-sm md:text-base">
      </div>
      
      <!-- Section Header -->
      <div class="px-4 py-2 bg-gradient-to-r from-teal-400 to-green-400 dark:from-teal-600 dark:to-green-600 text-white font-bold text-lg uppercase tracking-wide border-b-2 border-dotted border-white/50 dark:border-white/30 text-center rounded-t-xl sm:text-base md:text-lg">
        Top Categories
      </div>

      <!-- Menu Items -->
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/40/40?random=1" alt="Electronics icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Electronics</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(120k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/40/40?random=2" alt="Fashion icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Fashion & Apparel</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(95k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/40/40?random=3" alt="Home icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Home & Garden</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(78k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/40/40?random=4" alt="Art icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Art & Collectibles</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(55k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/40/40?random=5" alt="Sports icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Sports & Outdoors</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(42k listings)</span>
      </a>

      <!-- Call to Action -->
      <div class="border-t-2 border-dotted border-white/50 dark:border-white/30 pt-4 px-4 pb-2 mt-4 text-center" role="none">
        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 border-4 border-lime-400 dark:border-lime-500 rounded-full shadow-md font-bold text-lg bg-cyan-400 text-teal-900 hover:bg-cyan-500 hover:text-teal-800 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg">
          <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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          View All Categories
        </a>
      </div>
    </div>
  </div>
</div>

Industrial_Candy_Footer_Component

Un composant de pied de page réactif pour un forum/une plate-forme communautaire, présentant une esthétique « industrielle » avec des accents de couleur « bonbon/sucré ». Comprend des liens de navigation, des icônes de médias sociaux, des droits d’auteur et une inscription à la newsletter, avec une prise en charge complète du mode sombre.

Ouvrir Aperçu

                <footer class="bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 font-sans border-t-4 border-t-pink-500 dark:border-t-pink-700 shadow-lg">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

    <!-- Section 1: Logo & Tagline -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-extrabold tracking-tighter text-pink-500 dark:text-pink-400 mb-4 font-mono transform hover:scale-105 transition-transform duration-300">
        FORUM<span class="text-emerald-500 dark:text-emerald-400">HUB</span>
      </a>
      <p class="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-xs">
        Your vibrant community for discussions, insights, and connections. Built on solid ground.
      </p>
      <div class="mt-6 flex flex-wrap gap-4 text-zinc-600 dark:text-zinc-400">
        <p class="text-xs font-semibold uppercase tracking-wider">Powered by:</p>
        <span class="text-xs bg-pink-200 dark:bg-pink-800 text-pink-700 dark:text-pink-300 px-2 py-0.5 rounded-full shadow-inner">Gears</span>
        <span class="text-xs bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full shadow-inner">Circuits</span>
      </div>
    </div>

    <!-- Section 2: Quick Links -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Quick Links
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Home
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Forums
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Members
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Guidelines
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 3: Resources -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Resources
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            FAQ
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Support
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Privacy Policy
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Terms of Service
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 4: Newsletter & Social -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Stay Connected
      </h3>
      <p class="text-zinc-700 dark:text-zinc-300 mb-4 text-sm">
        Join our newsletter for community updates and exclusive content.
      </p>
      <form class="flex flex-col sm:flex-row gap-2 mb-8">
        <input
          type="email"
          placeholder="Your email..."
          aria-label="Email for newsletter"
          class="flex-grow px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-50 placeholder-zinc-500 dark:placeholder-zinc-400
                 border-2 border-zinc-300 dark:border-zinc-700 focus:outline-none focus:border-pink-500 dark:focus:border-pink-400
                 transition-colors duration-200 shadow-inner text-sm"
        />
        <button
          type="submit"
          aria-label="Subscribe to newsletter"
          class="bg-pink-500 dark:bg-pink-600 hover:bg-pink-600 dark:hover:bg-pink-700 text-white font-semibold py-2 px-5 rounded-lg
                 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:ring-opacity-75 relative overflow-hidden text-sm"
        >
          <span class="relative z-10">Subscribe</span>
          <span class="absolute top-0 left-0 w-full h-full bg-pink-700 dark:bg-pink-800 opacity-0 hover:opacity-10 transition-opacity duration-300"></span>
        </button>
      </form>

      <h4 class="text-md font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-4">Follow Us</h4>
      <div class="flex space-x-6">
        <a href="#" aria-label="Follow us on Facebook" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M12 2.04C6.54 2.04 2 6.51 2 11.94c0 5.09 3.69 9.35 8.5 10.32v-7.31H7.81v-3.01h2.69V8.58c0-2.6 1.59-4.01 3.88-4.01 1.11 0 2.06.08 2.34.12v2.78h-1.64c-1.29 0-1.55.61-1.55 1.51v1.98h3.08l-.5 3.01h-2.58V22.26c4.98-.97 8.5-5.23 8.5-10.32 0-5.43-4.54-9.9-10.04-9.9z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Twitter" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M22.46 6c-.77.34-1.6.56-2.46.66.89-.53 1.57-1.37 1.89-2.37-.83.49-1.74.85-2.73 1.05C18.18 4.3 17.06 4 15.89 4c-3.3 0-5.99 2.68-5.99 5.99 0 .47.05.93.13 1.37-4.98-.25-9.39-2.64-12.34-6.28-.52.87-.82 1.87-.82 2.94 0 2.07 1.05 3.89 2.64 4.97-.8-.02-1.55-.24-2.2-.6v.07c0 2.9 2.06 5.31 4.79 5.86-.47.13-.96.2-1.47.2-.36 0-.71-.03-1.05-.1.76 2.37 2.97 4.1 5.6 4.14-2.05 1.61-4.64 2.57-7.44 2.57-.49 0-.96-.03-1.43-.09 2.64 1.7 5.77 2.7 9.17 2.7 10.99 0 17.02-9.12 17.02-17.02 0-.26-.01-.52-.02-.78.73-.53 1.36-1.19 1.86-1.92z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Instagram" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2A2.8 2.8 0 005 6.8v8.4C5 17.1 6.9 19 9.2 19h8.4c2.3 0 4.2-1.9 4.2-4.2V7.8A2.8 2.8 0 0019.2 5H7.6zm9.2-.7h.8v.8h-.8v-.8zm-5.4 2.2c-3.1 0-5.7 2.5-5.7 5.7s2.5 5.7 5.7 5.7 5.7-2.5 5.7-5.7-2.6-5.7-5.7-5.7zm0 2c2 0 3.7 1.6 3.7 3.7S14 17.7 12 17.7 8.3 16.1 8.3 14 10 10.3 12 10.3z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on LinkedIn" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zm-12 17.5h-3v-7h3zM6.91 9.4c-1.12 0-2-.82-2-1.99 0-1.18.88-2 2-2.01 1.12 0 2 .82 2 1.99S8.03 9.4 6.91 9.4zm13.11 10.1h-3.05a.5.5 0 01-.5-.5v-4.38c0-.77-.07-1.46-.86-1.46-.72 0-1.22.49-1.42 1.05-.09.25-.13.58-.13.91v4.08a.5.5 0 01-.5.5h-2.91a.5.5 0 01-.5-.5V12c0-1.3.01-2.6.01-3.69-.01-.72-.08-1.39-.77-1.39-.71 0-1.22.49-1.42 1.05-.09.25-.13.59-.13.92v6.62a.5.5 0 01-.5.5h-3.05a.5.5 0 01-.5-.5v-7h3v1.27a.5.5 0 01.12.33c.48-.68 1.18-1.22 2.76-1.22 3.12 0 5.48 2.05 5.48 6.46v5.82a.5.5 0 01-.5.5zM12 11h-3v-2h3v2z"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Bottom Bar: Copyright & Theme Toggle (Placeholder) -->
  <div class="bg-zinc-200 dark:bg-zinc-800 py-6 border-t border-t-zinc-300 dark:border-t-zinc-700">
    <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-zinc-600 dark:text-zinc-400">
      <p>&copy; 2023 ForumHub. All rights reserved. Built with <span class="text-pink-500 dark:text-pink-400">&hearts;</span> by Community Devs.</p>
      <div class="mt-4 md:mt-0 flex items-center space-x-4">
        <span class="font-semibold">Industrial Charm, Sweet Vibes.</span>
        <!-- Placeholder for a real theme toggle: -->
        <button
          aria-label="Toggle dark mode"
          class="bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full
                 hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-200 text-xs font-bold shadow-sm"
        >
          Toggle Theme
        </button>
      </div>
    </div>
  </div>
</footer>

Retro_Earth_Tone_Portfolio_Footer

Un composant de navigation de pied de page réactif à thème rétro pour un site Web de portfolio, avec la prise en charge des tons de terre et du mode sombre. Conçu avec l’esthétique des années 80/90 à l’esprit, offrant une sensation nostalgique.

Ouvrir Aperçu

                <footer class="bg-amber-100 dark:bg-gray-900 text-amber-900 dark:text-gray-100 py-8 md:py-12 font-mono border-t-4 border-amber-900 dark:border-gray-700">
  <div class="container mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
      <div class="flex flex-col items-center md:items-start text-center md:text-left">
        <a href="#" class="text-2xl font-bold uppercase tracking-wider mb-4 hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">
          [Your Portfolio]
        </a>
        <p class="text-sm mb-4 max-w-xs">Crafting digital experiences since the '90s. Pixel-perfect code. Analog soul.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.373-.623 9.573-4.721 9.573-9.879Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.843.04 1.15.148 1.465.247a4.872 4.872 0 0 1 3.427 3.427c.099.315.207.622.247 1.465.047 1.013.049 1.371.049 3.797 0 2.43-.002 2.784-.048 3.797-.04.843-.148 1.15-.247 1.465a4.872 4.872 0 0 1-3.427 3.427c-.315.099-.622.207-1.465.247-1.013.047-1.371.049-3.797.049s-2.784-.002-3.797-.048c-.843-.04-1.15-.148-1.465-.247a4.872 4.872 0 0 1-3.427-3.427c-.099-.315-.207-.622-.247-1.465-.047-1.013-.049-1.371-.049-3.797s.002-2.784.048-3.797c.04-.843.148-1.15.247-1.465a4.872 4.872 0 0 1 3.427-3.427c.315-.099.622-.207 1.465-.247C9.567 2.002 9.92 2 12.315 2Zm0 0S5.474 2 5.031 2.008c-.844.04-1.282.174-1.637.387a3.36 3.36 0 0 0-1.921 1.921c-.213.355-.347.793-.387 1.637C2.002 6.969 2 7.413 2 12.001c0 4.588.002 5.031.008 5.875.04.844.174 1.282.387 1.637a3.36 3.36 0 0 0 1.921 1.921c.355.213.793.347 1.637.387C6.969 22.002 7.413 22 12.001 22c4.588 0 5.031-.002 5.875-.008.844-.04 1.282-.174 1.637-.387a3.36 3.36 0 0 0 1.921-1.921c.213-.355.347-.793.387-1.637.006-.844.008-1.282.008-5.875s-.002-5.031-.008-5.875c-.04-.844-.174-1.282-.387-1.637a3.36 3.36 0 0 0-1.921-1.921c-.355-.213-.793-.347-1.637-.387C17.031 2.002 16.588 2 12.001 2Zm0 5.875a6.126 6.126 0 1 0 0 12.252 6.126 6.126 0 0 0 0-12.252ZM12.001 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.848a1.69 1.69 0 1 0 0 3.38 1.69 1.69 0 0 0 0-3.38Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c-4.69 0-8.5-3.81-8.5-8.5s3.81-8.5 8.5-8.5c2.3 0 4.41.92 5.89 2.45l-1.8 1.8c-1.07-.95-2.52-1.55-4.09-1.55-3.32 0-6 2.68-6 6s2.68 6 6 6c3.04 0 5.6-2.26 5.89-5.3h-5.89V10h9.5c.13.62.2 1.25.2 1.9 0 5.24-4.24 9.5-9.5 9.5Z"/>
              <path d="M23 12h-9c0 5.24 4.24 9.5 9.5 9.5h-.5c-4.41 0-7.97-3.56-7.97-7.97 0-.65.07-1.28.2-1.9H23v2.85z"/>
            </svg>
            <span class="sr-only">Google</span>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Quick Links</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Home</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">About</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Portfolio</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Services</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Contact</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Categories</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Web Design</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Branding</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">UI/UX</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Development</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Illustration</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8.001 8.001 0 0120 12c0 2.21-1.206 4.16-3.097 5.29-1.425.864-3.153 1.34-5.028 1.34-3.957 0-7.25-3.047-7.25-6.81 C4.625 9.09 5.86 6.88 7.625 5.56L17.657 16.727zM6.343 7.273 C5.83 6.94 5.376 6.541 4.98 6.095m0 0a8.001 8.001 0 01-2.316 2.502L6.343 7.273z"></path></svg>123 Pixel Drive, Retroville, RV 90210</p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-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 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.106 9.2A1 1 0 0011.233 10c1.354-.42 2.766-.671 4.29-1.284A1 1 0 0016 8.35v-1.7a2 2 0 012-2h3a2 2 0 012-2v16a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1.7a1 1 0 00-.777-.962c-1.524-.613-2.936-.864-4.29-1.284a1 1 0 00-1.127.784l-.872 3.518A1 1 0 018.28 21H5a2 2 0 01-2-2V5z"></path></svg><a href="tel:+1234567890" class="hover:underline">+1 (234) 567-890</a></p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-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 8l7.983 5.485c.346.238.749.362 1.167.362.418 0 .82-.124 1.167-.362L21 8M6.25 10a.75.75 0 100 1.5.75.75 0 000-1.5zM12 12c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zM21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V8z"></path></svg><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        </address>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t-2 border-amber-800 dark:border-gray-700 text-center text-sm">
      <p>&copy; <span id="current-year"></span> [Your Portfolio]. All rights reserved. <span class="hidden md:inline">Designed with '80s passion.</span></p>
    </div>
  </div>
</footer>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Composant du formulaire d’inscription

Un composant de formulaire d’inscription réactif avec un design skeuomorphe, une palette de couleurs sourdes et une prise en charge du mode sombre, adapté aux sites Web de voyage et de tourisme. Il imite des éléments du monde réel tels que des boutons en relief et des champs de saisie encastrés.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
  <div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
    <h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
      <span class="block">Embark on Your Journey</span>
      <span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
    </h2>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Full Name">
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Email Address">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
        <input type="password" id="password" name="password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Password">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Confirm Password">
      </div>

      <div class="relative flex items-start">
        <div class="flex items-center h-5">
          <input id="terms" name="terms" type="checkbox"
                 class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
                        bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
                        shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
                        dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
                        appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
                        transition-all duration-200 ease-in-out">
          <div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
            <svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
        </div>
        <div class="ml-3 text-sm">
          <label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
            I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
          </label>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
                       bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
                       shadow-xl
                       shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
                       dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
                       active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
                       transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
          Register Now
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom style for the checkbox checkmark animation */
  input[type='checkbox']:checked + div > svg {
    opacity: 1;
    transform: scale(1);
  }
</style>

Memphis_Monochrome_Image_Lightbox

Un composant de lightbox d’image simple et réactif avec une influence de Memphis Design, avec une palette monochrome avec une seule couleur d’accent vive. Conçu pour les plateformes d’emploi/de carrière.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden group border-4 border-black dark:border-white animate-fade-in">
    
    <!-- Memphis Design Top Accent -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-yellow-400 dark:bg-yellow-500 rounded-br-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-blue-400 dark:bg-blue-500 rounded-bl-full z-10 opacity-50"></div>

    <!-- Image Container (Simulated Lightbox Opener) -->
    <div class="relative h-64 sm:h-72 md:h-80 lg:h-96 w-full overflow-hidden">
      <img src="https://picsum.photos/1200/800?random=1" alt="Career Development Image" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
      
      <!-- Overlay for 'View Details' -->
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <button class="px-6 py-3 bg-yellow-400 dark:bg-yellow-500 text-black text-lg font-bold uppercase rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
          View Details
        </button>
      </div>
    </div>
    
    <!-- Content Area -->
    <div class="p-6 sm:p-8 relative z-20">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Elevate Your Career Path
      </h3>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-4">
        Explore new opportunities and connect with industry leaders. Click the image to see more about our exclusive career resources.
      </p>
      
      <!-- Call to Action / Info Grid -->
      <div class="grid grid-cols-2 gap-4 text-center mb-6">
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">500+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Courses</span>
          <div class="absolute top-0 left-0 w-6 h-6 bg-yellow-400 dark:bg-yellow-500 rounded-br-md opacity-20"></div>
        </div>
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">10K+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Members</span>
          <div class="absolute top-0 right-0 w-6 h-6 bg-blue-400 dark:bg-blue-500 rounded-bl-md opacity-20"></div>
        </div>
      </div>

      <!-- Simulated Profile / Mentor -->
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-yellow-400 dark:border-yellow-500" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Mentor Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Career Coach, HR Dept.</p>
        </div>
      </div>
    </div>

    <!-- Memphis Design Bottom Accent -->
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-tl-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 bg-blue-400 dark:bg-blue-500 rounded-tr-full z-10 opacity-50"></div>

  </div>
</div>

Playful_Sports_Login_Form

Un composant de formulaire de connexion ludique et joyeux avec des éléments arrondis et des couleurs de terre, conçu pour les applications de sport et de fitness. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 min-h-screen flex items-center justify-center bg-green-100 dark:bg-stone-900 font-sans">
  <div class="w-full max-w-md p-6 sm:p-8 md:p-10 bg-white dark:bg-stone-800 rounded-3xl shadow-xl transform transition-all duration-300 hover:scale-[1.02] border border-green-200 dark:border-stone-700">
    <div class="flex justify-center mb-6 sm:mb-8">
      <img src="https://picsum.photos/100/100?random=1" alt="Sports Logo" class="rounded-full w-20 h-20 sm:w-24 sm:h-24 object-cover border-4 border-green-500 dark:border-green-600 shadow-md animate-bounce-slow">
    </div>
    <h2 class="text-center text-3xl sm:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Welcome Back, Athlete!
    </h2>
    <p class="text-center text-stone-600 dark:text-stone-400 mb-6 sm:mb-8 text-base sm:text-lg">
      Sign in to manage your team or track your fitness journey.
    </p>

    <form>
      <div class="mb-4 sm:mb-5">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">
          Email Address
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="[email protected]"
          class="shadow-sm appearance-none border border-green-300 dark:border-stone-700 rounded-xl w-full py-3 px-4 text-stone-700 dark:text-stone-200 leading-tight focus:outline-none focus:ring-4 focus:ring-green-200 dark:focus:ring-green-700 focus:border-transparent bg-green-50 dark:bg-stone-700 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500"
          aria-label="Email Address"
        />
      </div>
      <div class="mb-6 sm:mb-7">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">
          Password
        </label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="**********"
          class="shadow-sm appearance-none border border-green-300 dark:border-stone-700 rounded-xl w-full py-3 px-4 text-stone-700 dark:text-stone-200 leading-tight focus:outline-none focus:ring-4 focus:ring-green-200 dark:focus:ring-green-700 focus:border-transparent bg-green-50 dark:bg-stone-700 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500"
          aria-label="Password"
        />
      </div>
      <div class="flex items-center justify-between mb-6 sm:mb-8">
        <a href="#" class="inline-block align-baseline font-bold text-sm text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 transition-colors duration-200">
          Forgot Password?
        </a>
        <button
          type="submit"
          class="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-green-300/50 dark:shadow-green-900/50 flex items-center gap-2"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
          </svg>
          Sign In
        </button>
      </div>
      <p class="text-center text-stone-600 dark:text-stone-400 text-sm">
        Don't have an account? <a href="#" class="font-bold text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 transition-colors duration-200">Sign Up</a>
      </p>
    </form>
  </div>
  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 3s infinite ease-in-out;
    }
  </style>
</div>

1 ... 66 67 68 69 70 ... 335

Rechercher des composants

Catégories

Tous les composants