Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Composants d’affichage de contenu

Un composant d’affichage de contenu simple et réactif avec un effet de glassmorphism, une prise en charge du thème sombre et une palette de couleurs complémentaire, adaptée aux blogs ou à la consommation de contenu.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 flex items-center justify-center p-4">
  <div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 rounded-xl p-6 shadow-xl border border-gray-200 dark:border-gray-700 max-w-2xl w-full">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Content Card</h1>
    
    <div class="mb-4">
      <img src="https://picsum.photos/600/300" alt="Blog Post Image" class="rounded-lg shadow-md mb-4">
      <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Lorem Ipsum Dolor Sit Amet</h2>
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
    
    <div class="flex items-center justify-between border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-500 dark:border-pink-500">
        <div>
          <p class="font-semibold text-gray-700 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">August 15, 2023</p>
        </div>
      </div>
      <a href="#" class="text-purple-600 dark:text-pink-400 hover:underline font-medium">Read More &rarr;</a>
    </div>
  </div>
</div>

Composant Composants de rétroaction

Il s’agit d’un composant de feedback complexe, réactif et pris en charge par un thème sombre pour un tableau de bord, conçu avec une esthétique minimaliste/plate et une palette de couleurs pastel. Il affiche divers éléments de retour d’information tels qu’une barre de progression, des indicateurs d’état et une activité récente, en utilisant uniquement du HTML avec des classes CSS Tailwind.

Ouvrir Aperçu

                <div class="p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Feedback Overview</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
    <!-- Positive Feedback -->
    <div class="bg-gradient-to-r from-green-200 to-green-100 dark:from-green-700 dark:to-green-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-green-400 dark:bg-green-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
        </div>
        <p class="text-green-800 dark:text-green-100 font-medium">Positive Feedback</p>
      </div>
      <span class="text-green-800 dark:text-green-100 text-xl font-bold">85%</span>
    </div>

    <!-- Negative Feedback -->
    <div class="bg-gradient-to-r from-red-200 to-red-100 dark:from-red-700 dark:to-red-600 p-4 rounded-md flex items-center justify-between">
      <div class="flex items-center">
        <div class="p-3 bg-red-400 dark:bg-red-500 rounded-full mr-3">
          <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
        <p class="text-red-800 dark:text-red-100 font-medium">Negative Feedback</p>
      </div>
      <span class="text-red-800 dark:text-red-100 text-xl font-bold">15%</span>
    </div>
  </div>

  <!-- Feedback Progress Bar -->
  <div class="mb-8">
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Overall Satisfaction</h3>
    <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
      <div class="bg-teal-400 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 text-right">75% Satisfied</p>
  </div>

  <!-- Recent Feedback Activity -->
  <div>
    <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-4">Recent Activity</h3>
    <ul class="space-y-4">
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Great service, very helpful!"</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Jane Doe <span class="ml-2 px-2 py-0.5 bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100 text-xs font-semibold rounded-full">Positive</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">2 hours ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Room for improvement on delivery."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- John Smith <span class="ml-2 px-2 py-0.5 bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100 text-xs font-semibold rounded-full">Neutral</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">1 day ago</span>
      </li>
      <li class="flex items-center">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
        <div class="flex-grow">
          <p class="text-gray-800 dark:text-gray-100 font-medium">"Not satisfied with the product quality."</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">- Emily White <span class="ml-2 px-2 py-0.5 bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100 text-xs font-semibold rounded-full">Negative</span></p>
        </div>
        <span class="text-sm text-gray-400 dark:text-gray-500">3 days ago</span>
      </li>
    </ul>
  </div>
</div>

Neumorphisme Earth Tone Menu déroulant

Un menu déroulant de style Neumorphisme avec des tons de terre, adapté au commerce électronique. Il est réactif et inclut la prise en charge du thème sombre avec Tailwind CSS. Aucun JavaScript n’est utilisé, seulement des classes d’utilitaires HTML et Tailwind pour le style, y compris les variantes en mode sombre.

Ouvrir Aperçu

                <div class="p-8 bg-gradient-to-br from-stone-200 to-stone-400 min-h-screen dark:from-stone-800 dark:to-stone-900 flex items-start justify-center font-sans">
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark px-6 py-3 bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 text-stone-700 dark:text-stone-300 text-lg font-medium hover:from-stone-400 hover:to-stone-300 dark:hover:from-stone-600 dark:hover:to-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-stone-500 transition-all duration-300" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Product Categories
        <svg class="-mr-1 ml-3 h-6 w-6" 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 panel, show/hide based on menu state. -->
    <div class="origin-top-right absolute right-0 mt-4 w-72 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-100 scale-100 transition-all duration-300 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <div class="py-2" role="none">
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Electronics</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Apparel</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Home Goods</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Books & Media</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Sports & Outdoors</a>
      </div>
    </div>
  </div>
</div>

<!-- Tailwind CSS Neumorphic Shadow Utility Classes -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a8a8a8, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }
  @media (max-width: 640px) {
    .max-w-xs {
      max-width: 20rem; /* 320px */
    }
  }
  @media (min-width: 641px) and (max-width: 768px) {
    .sm\:max-w-md {
      max-width: 28rem; /* 448px */
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .md\:max-w-lg {
      max-width: 32rem; /* 512px */
    }
  }
  @media (min-width: 1025px) {
    .lg\:max-w-xl {
      max-width: 36rem; /* 576px */
    }
  }
</style>

Composant Notifications

Un composant de notifications simple et réactif pour le commerce électronique, avec des éléments de conception 3D et une palette de couleurs de tons terre. Prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="p-4 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-stone-700 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
    <div class="p-6 md:p-8 border-b-2 border-stone-200 dark:border-stone-600">
      <h2 class="text-2xl md:text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2 drop-shadow-md">Notifications</h2>
      <p class="text-stone-600 dark:text-stone-300">Stay updated on your recent e-commerce activities.</p>
    </div>
    <div class="divide-y divide-stone-200 dark:divide-stone-600">
      
      <!-- Notification Item 1 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-6 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/product1/50/50" alt="Product Image">
          <div class="absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Order Delivered!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Your recent order <span class="font-mono text-xs bg-stone-200 dark:bg-stone-600 px-2 py-1 rounded">#12345</span> has been delivered successfully.</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">2 hours ago</span>
        </div>
      </div>

      <!-- Notification Item 2 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-200">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-emerald-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">New Message from Seller</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">"Thank you for your purchase! Let us know if you have any questions."</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">1 day ago</span>
        </div>
      </div>

      <!-- Notification Item 3 -->
      <div class="p-4 md:p-6 flex items-start space-x-4 animate-fade-in-down animation-delay-400">
        <div class="relative w-12 h-12 rounded-full overflow-hidden shadow-lg transform -rotate-3 transition-all duration-300 hover:rotate-0">
          <img class="w-full h-full object-cover" src="https://picsum.photos/seed/promotion/50/50" alt="Promotion Icon">
          <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-indigo-500 opacity-60"></div>
        </div>
        <div class="flex-1">
          <p class="text-stone-800 dark:text-stone-100 font-semibold">Limited Time Offer!</p>
          <p class="text-sm text-stone-600 dark:text-stone-300 mt-1">Get <span class="font-extrabold text-lime-600 dark:text-lime-400">20% off</span> on all natural wood items. Shop now!</p>
          <span class="text-xs text-stone-500 dark:text-stone-400 mt-2 block">3 days ago</span>
        </div>
      </div>

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

<style>
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}
.animation-delay-200 {
  animation-delay: 0.2s;
}
.animation-delay-400 {
  animation-delay: 0.4s;
}
</style>

Composant Infographie

Composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs monochromatiques et une prise en charge du thème sombre pour les sites Web d’entreprise.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
    
    <!-- Retro/Vintage background elements -->
    <div class="absolute inset-0 z-0 opacity-10 pointer-events-none">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full absolute -top-8 -left-8"></div>
      <div class="w-24 h-24 bg-gray-300 dark:bg-gray-700 rounded-full absolute -bottom-8 -right-8"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute top-1/4 -left-16 transform -rotate-45"></div>
      <div class="w-48 h-12 bg-gray-200 dark:bg-gray-700 absolute bottom-1/4 -right-16 transform rotate-45"></div>
    </div>

    <div class="relative z-10">
      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-wide uppercase">
        Our Company Milestones
      </h2>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        
        <!-- Milestone 1 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">1985</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Founded</h3>
          <p class="text-gray-600 dark:text-gray-300">Started with a vision to innovate the industry.</p>
        </div>

        <!-- Milestone 2 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2000</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Global Expansion</h3>
          <p class="text-gray-600 dark:text-gray-300">Expanded our reach to international markets.</p>
        </div>

        <!-- Milestone 3 -->
        <div class="flex flex-col items-center text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-md shadow-inner transition-transform duration-300 hover:scale-105">
          <div class="text-5xl text-gray-600 dark:text-gray-300 mb-3 font-mono">2023</div>
          <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Future Ready</h3>
          <p class="text-gray-600 dark:text-gray-300">Embracing new technologies for sustainable growth.</p>
        </div>
      </div>

      <div class="mt-8 text-center">
        <a href="#" class="inline-block bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 py-3 px-8 rounded-full font-bold uppercase tracking-wider shadow-md hover:bg-gray-800 dark:hover:bg-gray-300 transition duration-300">
          Learn More About Our Journey
        </a>
      </div>
    </div>
  </div>
</div>

Composant Composants d’amélioration de la navigation

Un composant de navigation réactif avec prise en charge du mode sombre pour les sites Web de commerce électronique. Il présente une palette de couleurs triadique avec un fond sombre pour réduire la fatigue oculaire.

Ouvrir Aperçu

                <nav class="bg-gray-900 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <a href="#" class="text-white text-lg font-semibold">E-Shop</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
      <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
    </ul>
    <div class="flex items-center space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      <button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
    </div>
  </div>
</nav>

Volet Forum communautaire

Il s’agit d’un composant de forum communautaire complexe, réactif et conçu par Skeuomorphism pour le commerce électronique avec une palette de couleurs en niveaux de gris, une prise en charge du thème sombre et aucun JavaScript. Utilise Tailwind CSS et des images/avatars factices.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-sans transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <header class="flex items-center justify-between mb-8 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <h1 class="text-4xl font-extrabold text-gray-800 dark:text-gray-200 text-shadow-md z-10">Community Forum</h1>
      <div class="flex items-center space-x-4 z-10">
        <input type="text" placeholder="Search..." class="px-5 py-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-300 dark:border-gray-600 shadow-inner focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-300 transition-all duration-200 placeholder-gray-500 dark:placeholder-gray-400 w-64">
        <button class="p-3 bg-gray-500 dark:bg-gray-600 rounded-full shadow-lg border border-gray-600 dark:border-gray-500 hover:bg-gray-600 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
          <span class="block w-6 h-6 bg-center bg-no-repeat bg-contain icon-plus group-hover:rotate-90 transition-transform duration-300"></span>
          <div class="absolute inset-0 bg-noise opacity-10"></div>
        </button>
      </div>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
      <!-- Left Sidebar - Categories/Navigation -->
      <aside class="lg:col-span-1 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-slide-in-left">
        <div class="absolute inset-0 bg-noise opacity-5"></div>
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Categories</h2>
        <ul class="space-y-4 z-10">
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shopping-cart group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Product Support</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-shipping group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Order & Shipping</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-returns group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">Returns & Refunds</span>
          </li>
          <li class="p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer flex items-center space-x-3 group">
            <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-faq group-hover:scale-110 transition-transform duration-200"></span>
            <span class="text-gray-800 dark:text-gray-200 font-medium group-hover:underline">General Inquiries</span>
          </li>
        </ul>

        <div class="mt-8">
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Popular Topics</h2>
          <ul class="space-y-3 z-10">
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Troubleshooting your new gadget</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>What's the best delivery option?</span>
            </li>
            <li class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-colors duration-200 cursor-pointer flex items-center space-x-2">
              <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-fire"></span>
              <span>Extended warranty details</span>
            </li>
          </ul>
        </div>
      </aside>

      <!-- Main Forum Content -->
      <main class="lg:col-span-3 space-y-8">
        <!-- Featured/Pinned Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Featured Discussions</h2>
          <div class="space-y-4 z-10">
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Announcement: Holiday Shipping Deadlines 2024</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Admin on Nov 15, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>120 replies</span>
              </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer group">
              <div class="flex items-center space-x-4">
                <span class="w-6 h-6 bg-center bg-no-repeat bg-contain icon-pin transform group-hover:scale-110 transition-transform duration-200"></span>
                <div>
                  <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">New Product Line Q1 2025 Sneak Peek!</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">Posted by Marketing Team on Dec 1, 2024</p>
                </div>
              </div>
              <div class="text-gray-700 dark:text-gray-300 flex items-center space-x-2">
                <span class="w-4 h-4 bg-center bg-no-repeat bg-contain icon-comment"></span>
                <span>250 replies</span>
              </div>
            </div>
          </div>
        </section>

        <!-- Recent Threads -->
        <section class="p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 relative overflow-hidden animate-fade-in-up delay-100">
          <div class="absolute inset-0 bg-noise opacity-5"></div>
          <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200 text-shadow-sm z-10">Recent Activity</h2>
          <div class="space-y-4 z-10">
            <!-- Thread Item 1 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Issue with my recent order - missing item</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JaneDoe</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Order & Shipping</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>5 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>120 views</span>
                </div>
                <span class="text-sm">2 hours ago</span>
              </div>
            </div>

            <!-- Thread Item 2 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">Question about product compatibility</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">JohnDoh</span> in <span class="font-medium text-gray-700 dark:text-gray-300">Product Support</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>10 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>250 views</span>
                </div>
                <span class="text-sm">1 day ago</span>
              </div>
            </div>

            <!-- Thread Item 3 -->
            <div class="p-5 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md border border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 group cursor-pointer flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-4">
              <div class="flex items-start sm:items-center space-x-4">
                <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-500 dark:border-gray-400 shadow-lg object-cover transform group-hover:scale-105 transition-transform duration-200">
                <div>
                  <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 group-hover:underline">General feedback on website usability</h3>
                  <p class="text-sm text-gray-600 dark:text-gray-400">by <span class="font-medium text-gray-700 dark:text-gray-300">BotUser</span> in <span class="font-medium text-gray-700 dark:text-gray-300">General Inquiries</span></p>
                </div>
              </div>
              <div class="flex items-center space-x-4 text-gray-700 dark:text-gray-300">
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-comment"></span>
                  <span>2 replies</span>
                </div>
                <div class="flex items-center space-x-1">
                  <span class="w-5 h-5 bg-center bg-no-repeat bg-contain icon-views"></span>
                  <span>50 views</span>
                </div>
                <span class="text-sm">3 days ago</span>
              </div>
            </div>
          </div>

          <!-- Pagination -->
          <div class="mt-8 flex justify-center space-x-4 z-10">
            <button class="px-6 py-3 bg-gray-400 dark:bg-gray-600 text-gray-900 dark:text-gray-100 rounded-full shadow-lg border border-gray-500 dark:border-gray-500 hover:bg-gray-500 dark:hover:bg-gray-500 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Previous</span>
            </button>
            <button class="px-6 py-3 bg-gray-600 dark:bg-gray-500 text-white dark:text-gray-900 rounded-full shadow-lg border border-gray-700 dark:border-gray-400 hover:bg-gray-700 dark:hover:bg-gray-400 transition-all duration-200 group relative overflow-hidden">
              <span class="absolute inset-0 bg-noise opacity-10"></span>
              <span class="z-10 relative">Next</span>
            </button>
          </div>
        </section>
      </main>
    </div>

    <!-- Footer -->
    <footer class="mt-12 p-6 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl border border-gray-400 dark:border-gray-600 text-center text-gray-700 dark:text-gray-300 relative overflow-hidden animate-fade-in-up delay-200">
      <div class="absolute inset-0 bg-noise opacity-5"></div>
      <p class="z-10 relative">&copy; 2024 E-commerce Community Forum. All rights reserved.</p>
      <div class="flex justify-center space-x-4 mt-4 z-10 relative">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:underline">Terms of Service</a>
      </div>
    </footer>
  </div>
</div>

<style>
  /* Base styles for Skeuomorphism - mimic physical depth */
  .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); }
  .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); }
  .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04); }
  .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }
  .text-shadow-md { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); }
  .text-shadow-sm { text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }

  /* Custom noise background for texture */
  .bg-noise {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSIgeD1

Material Design Conteneur E-commerce

Composant de conteneur d’e-commerce réactif avec une grille de produits, un récapitulatif du panier d’achat et la prise en charge du thème sombre, conçu à l’aide des principes de conception matérielle et d’une palette de couleurs Earth Tones. Il comporte plusieurs éléments interactifs, notamment des fiches produits avec des images, des titres, des prix et des boutons « Ajouter au panier », ainsi qu’un récapitulatif du panier d’achat qui se met à jour avec les articles ajoutés. La mise en page s’adapte aux différentes tailles d’écran, et tous les éléments ont des styles de mode sombre définis avec les préfixes Tailwind CSS dark :.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">

  <!-- Sticky Shopping Cart Summary -->
  <div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
    <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
      <p class="text-sm">Items: <span class="font-medium">3</span></p>
      <p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
    </div>
    <button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
  </div>

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

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

  </div>
</div>

Volet Composantes sociales

Une carte de réseau social simple et réactive avec des éléments de conception 3D, des tons de terre et une prise en charge du mode sombre.

Ouvrir Aperçu

                
<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-900 overflow-hidden transform transition-all duration-300 hover:scale-105">
    <!-- Subtle 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent dark:from-black/20 dark:to-transparent opacity-50"></div>
    <div class="absolute inset-0 border-t border-l border-white/30 dark:border-black/30 transform skew-y-2 translate-x-2 translate-y-2 opacity-20"></div>

    <div class="relative p-6">
      <div class="flex items-center space-x-4 mb-4">
        <img class="w-12 h-12 rounded-full ring-2 ring-stone-400 dark:ring-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <p class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
          <p class="text-sm text-stone-600 dark:text-stone-400">@johndoe</p>
        </div>
      </div>

      <p class="text-stone-700 dark:text-stone-300 mb-4">
        Exploring the beauty of nature. Every moment is an adventure! #nature #travel #earthtones
      </p>

      <img class="w-full h-48 object-cover rounded-md mb-4 shadow-md transform translate-y-1 tranlsate-x-1" src="https://picsum.photos/600/400?random=1" alt="Post Image">

      <div class="flex justify-between items-center text-stone-600 dark:text-stone-400 text-sm">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
          </svg>
          <span>1.2K Likes</span>
        </div>
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 13.5V0H2v13.5A2.5 2.5 0 004.5 16h11A2.5 2.5 0 0018 13.5zM12 4H8v4h4V4z" clip-rule="evenodd" />
             <path d="M5 16h10c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5H5c-.828 0-1.5-.672-1.5-1.5S4.172 16 5 16z" />
             </svg>
          <span>245 Comments</span>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Badges

Un composant de badges simple et réactif avec prise en charge du mode sombre, utilisant une palette de couleurs triadique adaptée à un portfolio.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">My Skills</h2>
    <div class="flex flex-wrap gap-2">
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-blue-200 text-blue-800 dark:bg-blue-700 dark:text-blue-100">HTML</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-100">CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-green-200 text-green-800 dark:bg-green-700 dark:text-green-100">Tailwind CSS</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-yellow-200 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100">JavaScript</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-purple-200 text-purple-800 dark:bg-purple-700 dark:text-purple-100">React</span>
      <span class="px-3 py-1 rounded-full text-sm font-semibold bg-pink-200 text-pink-800 dark:bg-pink-700 dark:text-pink-100">Python</span>
    </div>
  </div>
</div>

1 ... 81 82 83 84 85 ... 282

Catégories

Tous les composants