Tous les composants

Composant Cartes de produit

Un composant de carte produit réactif avec un design Glassmorphism, une palette de couleurs en niveaux de gris et une prise en charge du thème sombre. Il comprend plusieurs éléments interactifs adaptés aux interfaces de médias sociaux, tels que l’image du produit, le titre, la description, le prix et le bouton d’ajout au panier. La conception utilise des éléments translucides semblables à du verre givré avec des effets de flou. Aucun Javascript n’est utilisé, seulement du HTML avec des classes CSS Tailwind.

Ouvrir l’aperçu

                <div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-100 dark:bg-gray-900">
  <!-- Product Card 1 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=1"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 1</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $120.00
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/men/1.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=2"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 2</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $99.50
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/women/2.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">Jane Smith</p>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div
    class="relative m-4 overflow-hidden bg-white rounded-lg shadow-lg w-96 dark:bg-gray-800"
    style="backdrop-filter: blur(10px);"
  >
    <img
      class="object-cover w-full h-64"
      src="https://picsum.photos/400/250?random=3"
      alt="Product Image"
    />
    <div
      class="absolute inset-0 bg-black bg-opacity-25 backdrop-filter backdrop-blur-lg"
    ></div>
    <div class="relative p-6">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white">Product Title 3</h3>
      <p class="mt-2 text-gray-600 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua.
      </p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          $249.99
        </span>
        <button
          class="px-4 py-2 font-bold text-white bg-gray-700 rounded-lg hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-gray-700"
        >
          View Details
        </button>
      </div>
      <div class="flex items-center mt-4">
        <img
          class="w-10 h-10 mr-4 rounded-full"
          src="https://randomuser.me/api/portraits/men/3.jpg"
          alt="Avatar"
        />
        <p class="text-gray-700 dark:text-gray-400">Peter Jones</p>
      </div>
    </div>
  </div>
</div>

Composant de fenêtre de chat

Un composant de fenêtre de chat simple, de style Glassmorphism, avec une palette de couleurs pastel, conçu pour la consommation de contenu. Il dispose d’une mise en page réactive et d’un support de thème sombre.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-black flex items-center justify-center p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-md border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <div class="font-sans text-gray-800 dark:text-white mb-4 text-xl font-semibold">Chat Window</div>
    <div class="space-y-4 h-64 overflow-y-auto pr-2 scrollbar-thumb-purple-300 scrollbar-track-purple-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">

      <!-- Incoming Message -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">Hello! This is a simple chat message. How are you?</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:00 AM</span>
        </div>
      </div>

      <!-- Outgoing Message -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I'm doing great, thanks for asking! This design is simple and elegant.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:05 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

      <!-- Incoming Message 2 -->
      <div class="flex items-end">
        <img src="https://randomuser.me/api/portraits/women/70.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 border-2 border-purple-300 dark:border-gray-500"/>
        <div class="bg-purple-200 dark:bg-gray-700 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">I totally agree! The Glassmorphism effect adds a nice touch.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:10 AM</span>
        </div>
      </div>

      <!-- Outgoing Message 2 -->
      <div class="flex justify-end items-end">
        <div class="bg-pink-200 dark:bg-gray-600 text-gray-800 dark:text-white p-3 rounded-lg max-w-[75%]">
          <p class="text-sm">And the pastel colors are very soothing for reading.</p>
          <span class="text-xs text-gray-600 dark:text-gray-400 mt-1 block text-right">10:15 AM</span>
        </div>
        <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 border-2 border-pink-300 dark:border-gray-500"/>
      </div>

    </div>
    <div class="mt-4 flex">
      <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-lg bg-white bg-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 border border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 focus:outline-none focus:ring-2 focus:ring-purple-300 dark:focus:ring-gray-500 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"/>
      <button class="ml-3 px-4 py-2 bg-purple-400 hover:bg-purple-500 dark:bg-gray-600 dark:hover:bg-gray-500 text-white rounded-lg transition duration-200 ease-in-out shadow-md">Send</button>
    </div>
  </div>
</div>

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

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

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

/* Define custom properties for scrollbar colors */
.scrollbar-thumb-purple-300 {
  --tw-scrollbar-thumb-color: #d1b1e8;
}

.scrollbar-track-purple-100 {
  --tw-scrollbar-track-color: #ede9fe;
}

.dark\:scrollbar-thumb-gray-600 {
  --tw-scrollbar-thumb-color: #4b5563;
}

.dark\:scrollbar-track-gray-800 {
  --tw-scrollbar-track-color: #1f2937;
}
</style>

Composant de navigation collante

Un composant de navigation autocollant avec un design skeuomorphe, une palette de couleurs triadique et une mise en page simple, adapté aux interfaces de médias sociaux. Il prend en charge le design réactif et le thème sombre.

Ouvrir l’aperçu

                <nav class="fixed inset-x-0 top-0 bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50 transform transition-transform duration-300 ease-in-out hover:-translate-y-1">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center space-x-4">
      <!-- Home Button - Blue/Cyan -->
      <a href="#" class="flex items-center space-x-2 bg-gradient-to-br from-blue-500 to-cyan-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v9a1 1 0 01-1 1h-3m-6 0v-9"></path></svg>
        <span class="font-semibold hidden sm:inline">Home</span>
      </a>

      <!-- Notifications Button - Magenta/Pink -->
      <a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-fuchsia-600 to-pink-500 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <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="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"></path></svg>
        <span class="font-semibold hidden sm:inline">Notifications</span>
        <span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">3</span>
      </a>

      <!-- Messages Button - Yellow/Orange -->
      <a href="#" class="relative flex items-center space-x-2 bg-gradient-to-br from-yellow-500 to-orange-400 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition duration-300 ease-in-out">
        <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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
        <span class="font-semibold hidden sm:inline">Messages</span>
        <span class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center border-2 border-white dark:border-gray-800">1</span>
      </a>
    </div>

    <!-- User Avatar - Right side -->
    <div class="relative">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-400 shadow-md transform hover:scale-110 transition duration-300 ease-in-out cursor-pointer">
      <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-800 -mb-1 -mr-1"></div>
    </div>
  </div>
</nav>

Composant de la barre latérale

Un composant de barre latérale réactif et minimaliste pour le commerce électronique, avec prise en charge du mode sombre. Il présente une mise en page simple avec des catégories de produits et une icône de panier.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
    <div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
    <nav>
      <ul class="space-y-4">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
      </ul>
    </nav>
    <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Shopping Cart
      </a>
    </div>
  </div>

  <!-- Main content area (for context) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
    <p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
  </div>
</div>

Composant du système d’évaluation

Un composant du système d’évaluation minimaliste/flat design avec une palette de couleurs complémentaires, une complexité modérée, adapté à la consommation de blogs/contenus. Il présente un design réactif avec la prise en charge du thème sombre utilisant les classes CSS Tailwind et sans JavaScript.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-sm w-full">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Rate this content</h2>
    <div class="flex justify-center space-x-2 mb-4">
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" fill="currentColor" viewBox="0 0 20 20">
        <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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-600 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" fill="currentColor" viewBox="0 0 20 20">
        <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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" fill="currentColor" viewBox="0 0 20 20">
        <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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" fill="currentColor" viewBox="0 0 20 20">
        <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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-300 hover:text-yellow-400 dark:hover:text-yellow-300 transition-colors duration-200 cursor-pointer" fill="currentColor" viewBox="0 0 20 20">
        <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.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400 text-center">Click on a star to rate!</p>
  </div>
</div>

Composant de la barre de navigation

Une barre de navigation réactive pour un tableau de bord, avec un thème en mode sombre avec des tons de terre. Comprend un logo, des liens de navigation, une barre de recherche et une section de profil utilisateur. Conçu pour une complexité modérée avec des éléments interactifs.

Ouvrir l’aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="flex items-center space-x-4">
      <!-- Logo -->
      <a href="#" class="text-white text-2xl font-bold font-serif">DashboardPro</a>

      <!-- Mobile Menu Button -->
      <button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-400 rounded-lg md:hidden hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
        <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>

    <!-- Navigation Links and Search (Collapsible) -->
    <div class="hidden w-full md:block md:w-auto" id="mobile-menu">
      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium items-center">
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-white rounded bg-transparent md:bg-transparent md:text-amber-300 dark:text-amber-400 md:p-0" aria-current="page">Home</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Analytics</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Reports</a>
        </li>
        <li>
          <a href="#" class="block py-2 pr-4 pl-3 text-gray-300 rounded hover:bg-gray-700 md:hover:bg-transparent md:border-0 md:hover:text-amber-300 dark:hover:text-amber-400 md:p-0">Settings</a>
        </li>

        <!-- Search Bar -->
        <li class="mt-4 md:mt-0">
          <form class="flex items-center">
            <label for="simple-search" class="sr-only">Search</label>
            <div class="relative w-full">
              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                <svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
              </div>
              <input type="text" id="simple-search" class="bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-white text-sm rounded-lg focus:ring-amber-500 focus:border-amber-500 block w-full pl-10 p-2.5" placeholder="Search" required>
            </div>
          </form>
        </li>

        <!-- User Profile/Avatar -->
        <li class="mt-4 md:mt-0">
          <a href="#" class="flex items-center space-x-2 text-gray-300 hover:text-white dark:hover:text-amber-400">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <span class="hidden md:inline-block">John Doe</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Simple JavaScript for mobile menu toggle (can be enhanced) -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const button = document.querySelector('[data-collapse-toggle="mobile-menu"]');
    const menu = document.getElementById('mobile-menu');

    button.addEventListener('click', function() {
      menu.classList.toggle('hidden');
    });
  });
</script>

Composant Boutons

Un composant de boutons réactifs avec prise en charge du mode sombre, adapté au commerce électronique, doté d’un schéma de couleurs triadique simple.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Product Card Example with Buttons -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm mb-8">
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Product Title</h3>
    <p class="text-gray-600 dark:text-gray-400 mb-4">Product description goes here. Short and catchy!.</p>
    <div class="flex items-center justify-between mb-4">
      <span class="text-lg font-bold text-gray-900 dark:text-gray-50">$29.99</span>
      <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$39.99</span>
    </div>
    <div class="flex space-x-4">
      <button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Add to Cart
      </button>
      <button class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Buy Now
      </button>
    </div>
  </div>

  <!-- Standalone Buttons Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Other Actions</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        View Details
      </button>
      <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Add to Wishlist
      </button>
      <button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Contact Seller
      </button>
      <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
        Report Issue
      </button>
    </div>
  </div>

</div>

Composant Mega Menu

Un composant de méga menu e-commerce simple et sombre avec une palette de couleurs en niveaux de gris, construit à l’aide de Tailwind CSS. Il est réactif et inclut la prise en charge du thème sombre à l’aide du préfixe dark : de Tailwind.

Ouvrir l’aperçu

                <nav class="bg-gray-950 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">ShopName</a>
    <div class="hidden md:flex space-x-6">
      <div class="relative group">
        <button class="hover:text-gray-300">Categories</button>
        <div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
          <a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-gray-300">Sales</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 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="M4 6h16M4 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Composant des chargeurs

Un composant de chargeur en mode sombre simple avec une palette de couleurs complémentaire.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="relative">
    <div class="h-24 w-24 rounded-full border-t-8 border-b-8 border-purple-500"></div>
    <div class="absolute top-0 left-0 h-24 w-24 rounded-full border-t-8 border-b-8 border-pink-500 animate-spin"></div>
  </div>
</div>

Composant Galerie

Un composant de galerie d’inspiration rétro/vintage avec une palette de couleurs vives, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour la consommation de contenu.

Ouvrir l’aperçu

                <div class="container mx-auto p-4 font-sans">

  <!-- Retro/Vintage Header -->
  <header class="text-center mb-8">
    <h1 class="text-5xl font-extrabold text-blue-700 dark:text-blue-300 mb-2 uppercase tracking-wide">The VINTAGE Gallery</h1>
    <p class="text-xl text-yellow-600 dark:text-yellow-400">A Glimpse into the Past, Vibrant as Ever</p>
  </header>

  <!-- Gallery Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- Gallery Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-500 dark:border-yellow-600">
      <img src="https://picsum.photos/seed/vintage1/400/300" alt="Vintage Camera" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Classic Capture</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-purple-500 dark:border-purple-600">
      <img src="https://picsum.photos/seed/retro2/400/300" alt="Retro Car" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Ride in Style</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-green-500 dark:border-green-600">
      <img src="https://picsum.photos/seed/vintage3/400/300" alt="Old Radio" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Broadcast Blasts</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

    <!-- Gallery Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 border-4 border-red-500 dark:border-red-600">
      <img src="https://picsum.photos/seed/retro4/400/300" alt="Vinyl Record" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-2xl font-bold text-red-600 dark:text-red-400 mb-2">Spinning Tunes</h2>
        <p class="text-gray-700 dark:text-gray-300 text-sm">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#" class="mt-4 inline-block text-blue-600 dark:text-blue-400 hover:underline font-semibold">View Details</a>
      </div>
    </div>

  </div>

  <!-- About Section (Moderate Complexity) -->
  <section class="mt-12 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border-4 border-blue-500 dark:border-blue-600">
    <h2 class="text-4xl font-bold text-blue-700 dark:text-blue-300 mb-6 text-center">About Our Collection</h2>
    <div class="flex flex-col md:flex-row items-center justify-center space-y-6 md:space-y-0 md:space-x-8">
      <div class="md:w-1/2">
        <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4">
          Step back in time with our curated collection of vintage and retro-inspired imagery. Each piece is selected to evoke nostalgia and a sense of timeless charm. We believe in vibrant storytelling through visual experiences.
        </p>
        <div class="flex items-center space-x-4">
          <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="Curator Avatar" class="w-16 h-16 rounded-full border-4 border-yellow-500">
          <div>
            <p class="font-bold text-red-600 dark:text-red-400">Jane Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Chief Curator</p>
          </div>
        </div>
      </div>
      <div class="md:w-1/2">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2">
          <li>Authentic Retro Aesthetics</li>
          <li>High-Quality Digital Renders</li>
          <li>Optimized for Blog/Content Integration</li>
          <li>Fully Responsive Design</li>
          <li>Dark Mode Ready</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="text-center mt-12 p-4 text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Vintage Vibes Gallery. All rights reserved.</p>
  </footer>

</div>

Catégories