Navigation

Composante de navigation brutaliste du commerce électronique

Un composant de navigation e-commerce complexe et brutaliste utilisant Tailwind CSS, avec un schéma de couleurs triadique (jaune, cyan, fuchsia) avec un contraste élevé (noir/blanc), un méga-menu CSS uniquement, une révélation de recherche CSS uniquement, un menu mobile réactif CSS uniquement et la prise en charge du mode sombre. HTML uniquement, pas de JavaScript.

Ouvrir l’aperçu

                <nav class="bg-yellow-400 text-black border-b-8 border-black dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
  <div class="container mx-auto px-4 relative">

    <!-- Checkbox for Mobile Menu State - Controls the mobile menu visibility -->
    <input type="checkbox" id="mobile-menu-toggle" class="hidden peer">

    <!-- Main Row: Logo, Desktop Nav, Mobile Toggle Label -->
    <!-- This div is a sibling of the checkbox -->
    <div class="flex justify-between items-center py-6">

      <!-- Logo -->
      <div class="text-3xl font-black uppercase tracking-widest border-4 border-black p-2 dark:border-yellow-400">
        <a href="#" class="hover:text-fuchsia-500 transition duration-300">BRUTAL SHOP</a>
      </div>

      <!-- Desktop Navigation & Icons (Hidden on Mobile) -->
      <div class="hidden md:flex items-center space-x-8">
        <ul class="flex items-center space-x-8 uppercase font-bold">
          <!-- Categories with CSS-only Mega-Menu -->
          <li class="relative group">
            <a href="#" class="hover:text-fuchsia-500 focus:outline-none focus:text-fuchsia-500">Categories</a>
            <!-- Mega-Menu Content (CSS-only via group-hover) -->
            <div class="absolute left-0 top-full mt-2 w-64 bg-cyan-500 text-black p-6 border-4 border-black opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-10 dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
              <h4 class="font-black mb-3 border-b-4 border-black dark:border-cyan-500">Shop By Category</h4>
              <ul class="space-y-2 text-sm">
                <li><a href="#" class="hover:underline">Electronics</a></li>
                <li><a href="#" class="hover:underline">Apparel</a></li>
                <li><a href="#" class="hover:underline">Home Goods</a></li>
                <li><a href="#" class="hover:underline">Books</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#" class="hover:text-fuchsia-500">New Arrivals</a></li>
          <li><a href="#" class="hover:text-fuchsia-500">Deals</a></li>
        </ul>

        <!-- User Icons, Search, Cart -->
        <div class="flex items-center space-x-6 text-2xl">
           <!-- Search Toggle/Input (CSS-only reveal on hover/focus) -->
           <div class="relative group">
               <svg class="w-6 h-6 cursor-pointer hover:text-fuchsia-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
               <!-- Simple search input reveal on hover/focus -->
               <input type="text" placeholder="Search..." class="absolute right-0 top-full mt-2 px-3 py-2 w-48 border-4 border-black bg-white text-black opacity-0 invisible group-hover:opacity-100 group-hover:visible focus:opacity-100 focus:visible transition-all duration-300 z-10 dark:bg-black dark:text-yellow-400 dark:border-yellow-400">
           </div>

           <!-- User Icon -->
           <a href="#" class="hover:text-fuchsia-500">
               <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
           </a>
           <!-- Wishlist Icon -->
           <a href="#" class="hover:text-fuchsia-500">
              <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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
           </a>
          <!-- Cart Icon with Count -->
          <a href="#" class="relative hover:text-fuchsia-500">
            <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="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>
            <span class="absolute -top-2 -right-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-yellow-400">3</span>
          </a>
        </div>
      </div>

      <!-- Mobile Menu Toggle Label (Visible on Mobile) -->
      <!-- This label controls the hidden checkbox peer -->
      <label for="mobile-menu-toggle" class="md:hidden block cursor-pointer p-2 relative z-20">
           <!-- Hamburger Icon - Spans styled based on the peer-checked state of the checkbox -->
           <div class="space-y-2 peer-checked:space-y-0 peer-checked:rotate-45 transition-transform duration-300">
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:rotate-90 peer-checked:translate-y-1.5 transition-transform duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:opacity-0 transition-opacity duration-300"></span>
             <span class="block w-8 h-1 bg-black border-2 border-black dark:bg-yellow-400 dark:border-yellow-400 peer-checked:-rotate-90 peer-checked:-translate-y-1.5 transition-transform duration-300"></span>
           </div>
      </label>
    </div>

    <!-- Mobile Menu Content -->
    <!-- This div is a sibling of the checkbox and the main row div -->
    <!-- Its visibility is controlled by the peer-checked state of the checkbox -->
    <div id="mobile-menu" class="md:hidden absolute top-[theme(spacing.20)] left-0 w-full bg-cyan-500 text-black border-t-8 border-black opacity-0 invisible transition-all duration-300 z-10 peer-checked:opacity-100 peer-checked:visible dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
      <div class="px-4 py-6 space-y-6">
         <!-- Search Input - Mobile -->
         <div>
            <input type="text" placeholder="Search..." class="px-3 py-2 w-full border-4 border-black bg-white text-black dark:bg-black dark:text-cyan-500 dark:border-cyan-500">
         </div>
         <!-- Mobile Links -->
         <ul class="space-y-4 uppercase font-bold text-xl">
             <li><a href="#" class="block hover:text-fuchsia-500">Categories</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">New Arrivals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Deals</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Account</a></li>
             <li><a href="#" class="block hover:text-fuchsia-500">Wishlist</a></li>
             <li><a href="#" class="flex items-center hover:text-fuchsia-500">
                 Cart <span class="ml-2 bg-fuchsia-500 text-black text-xs font-bold px-1 rounded-full border-2 border-black dark:border-cyan-500">3</span>
             </a></li>
         </ul>
      </div>
    </div>

  </div>
</nav>

Barre de navigation E-commerce

Neumorphism Barre de navigation e-commerce avec Earth Tones

Ouvrir l’aperçu

                <nav class="bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-gray-700 dark:text-gray-300 font-bold text-xl">E-Shop</div>
    <div class="flex space-x-4">
      <input type="text" placeholder="Search..." class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full py-2 px-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark focus:outline-none">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Cart
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-inset-light dark:hover:shadow-neumorphic-inset-dark">
        Account
      </a>
    </div>
  </div>
</nav>

<style>
  /* Add these to your Tailwind configuration */
  /*
  module.exports = {
    theme: {
      extend: {
        boxShadow: {
          'neumorphic-light': '9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5)',
          'neumorphic-dark': '9px 9px 16px rgba(0,0,0,.6), -9px -9px 16px rgba(50, 50, 50, .5)',
          'neumorphic-inset-light': 'inset 3px 3px 7px rgba(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255,.5)',
          'neumorphic-inset-dark': 'inset 3px 3px 7px rgba(0,0,0,.6), inset -3px -3px 7px rgba(50, 50, 50,.5)',
        }
      }
    }
  }
  */
</style>

Composant de navigation 3D

Un composant de navigation 3D réactif conçu pour le commerce électronique, avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-5 transition-transform transform hover:scale-105">
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <h1 class="text-gray-800 dark:text-white text-xl font-bold ml-3">Brand</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
      <a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
    </div>
    <button class="md:hidden text-gray-800 dark:text-gray-200 p-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-600">
      <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" />
      </svg>
    </button>
  </div>

  <div class="mt-4 md:hidden">
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Home</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Shop</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">About</a>
    <a href="#" class="block text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-300 transition duration-300">Contact</a>
  </div>

  <div class="mt-5 flex">
    <input type="text" placeholder="Search..." class="flex-1 p-2 rounded-lg border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200 bg-gray-200 dark:bg-gray-700 placeholder-gray-400 dark:placeholder-gray-500" />
    <button class="ml-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 p-2 rounded-lg shadow hover:shadow-lg transition duration-300">
      <img class="w-5 h-5" src="https://picsum.photos/seed/pic1/30/30" alt="Search Icon" />
    </button>
  </div>
</nav>

Composant de navigation rétro vintage

Un composant de navigation au design rétro/vintage avec une palette de couleurs monochromatiques pour un tableau de bord. Il inclut des liens et prend en charge le mode sombre.

Ouvrir l’aperçu

                <nav class="bg-gray-800 p-4 shadow-md">
    <div class="flex justify-between items-center">
        <div class="text-white text-lg font-bold">Retro Dashboard</div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Data</a>
            <a href="#" class="text-gray-300 hover:text-white">Settings</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Data</a>
        <a href="#" class="block text-gray-300 hover:text-white">Settings</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>

<div class="p-4">
    <h2 class="text-white text-2xl mb-4">Dashboard Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 1</h3>
            <p class="text-gray-300">Description of data point 1.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 2</h3>
            <p class="text-gray-300">Description of data point 2.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-md shadow-md">
            <img src="https://picsum.photos/400/300?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md">
            <h3 class="text-white mt-2">Data Point 3</h3>
            <p class="text-gray-300">Description of data point 3.</p>
        </div>
    </div>
</div>

Composant de navigation dans les médias sociaux

Un composant de navigation réactif conçu pour les interfaces de médias sociaux, avec une esthétique Material Design utilisant un thème sombre avec Tailwind CSS.

Ouvrir l’aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 p-4 shadow-lg">
    <div class="flex items-center justify-between">
        <a href="#" class="text-white text-lg font-semibold">Logo</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-300 hover:text-white">Explore</a>
            <a href="#" class="text-gray-300 hover:text-white">Notifications</a>
            <a href="#" class="text-gray-300 hover:text-white">Messages</a>
            <a href="#" class="text-gray-300 hover:text-white">Profile</a>
        </div>
        <div class="md:hidden">
            <button class="text-gray-300 hover:text-white focus:outline-none" aria-label="Menu">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block text-gray-300 hover:text-white">Home</a>
        <a href="#" class="block text-gray-300 hover:text-white">Explore</a>
        <a href="#" class="block text-gray-300 hover:text-white">Notifications</a>
        <a href="#" class="block text-gray-300 hover:text-white">Messages</a>
        <a href="#" class="block text-gray-300 hover:text-white">Profile</a>
    </div>
</nav>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Friends</h2>
    <div class="flex space-x-4 mt-2">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 1</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 2</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-gray-300 ml-2">User 3</span>
        </div>
    </div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Trending Posts</h2>
    <div class="flex flex-col space-y-4 mt-2">
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <div class="flex space-x-2">
            <img src="https://picsum.photos/50/50?random=1" alt="Post Image" class="rounded-lg">
            <div>
                <p class="text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <span class="text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
</div>\n<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow-md mt-4">
    <h2 class="text-white text-lg font-semibold">Explore More</h2>
    <ul class="mt-2 space-y-1">
        <li><a href="#" class="text-gray-300 hover:text-white">#Nature</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Travel</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Food</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Technology</a></li>
        <li><a href="#" class="text-gray-300 hover:text-white">#Lifestyle</a></li>
    </ul>
</div>

Composant de navigation skeuomorphe

Un composant de navigation conçu dans un style skeuomorphe, avec des couleurs vives et une mise en page réactive adaptée au contenu du blog. Il comprend des fonctionnalités interactives telles que des effets de survol et est optimisé pour le mode sombre.

Ouvrir l’aperçu

                <nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
    <div class="flex items-center mb-4 md:mb-0">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
    </div>
    <ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
        </li>
    </ul>
</nav>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
        </div>
    </div>
</div>

RétroNav

Un composant de navigation simple, réactif et compatible avec le mode sombre avec un design rétro/vintage, une palette de couleurs vives et des éléments minimaux, adapté aux sites Web de commerce électronique.

Ouvrir l’aperçu

                <nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
</nav>

Composant de navigation rétro vintage

Un composant de navigation réactif conçu avec une esthétique rétro/vintage inspirée des styles des années 80/90, avec une palette de couleurs pastel. Convient aux interfaces de médias sociaux, y compris la prise en charge du mode sombre.

Ouvrir l’aperçu

                <nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <div class="flex items-center justify-between">
        <div class="text-xl font-bold text-gray-800 dark:text-white">
            RetroSocial
        </div>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
        </div>
        <button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
            Menu
        </button>
    </div>
    <div class="mt-2 md:hidden">
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
        <a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
    </div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
    <h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
    <p class="text-gray-600 dark:text-gray-300 mt-2">
        Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
    </p>
    <div class="mt-4 flex space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
        <img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
    </div>
</div>

Composant de navigation

Un composant de navigation réactif en mode sombre conçu pour le commerce électronique avec une palette de couleurs pastel et une mise en page simple.

Ouvrir l’aperçu

                <nav class="bg-gray-800 dark:bg-gray-900 p-4">
    <div class="container mx-auto flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
                <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            </a>
            <a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
        </div>
    </div>
</nav>

Composant de navigation Glassmorphism

Un composant de navigation de style glassmorphism pour les sites de commerce électronique, avec des couleurs monochromes, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <nav class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg shadow-lg md:flex md:justify-between md:items-center py-4 px-6 fixed w-full z-10 dark:bg-gray-800 dark:bg-opacity-10 dark:backdrop-filter dark:backdrop-blur-lg">
    <div class="flex justify-between items-center">
        <a href="#" class="text-gray-700 text-xl font-bold md:text-2xl dark:text-white">Your Logo</a>
        <div class="flex md:hidden">
            <button type="button" class="text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800 dark:text-gray-200 dark:hover:text-white">
                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
                    <path fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"/>
                </svg>
            </button>
        </div>
    </div>

    <div class="hidden md:flex flex-col md:flex-row md:mx-6">
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Home</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Shop</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Categories</a>
        <a href="#" class="my-1 text-gray-700 hover:text-gray-900 md:mx-4 md:my-0 dark:text-gray-200 dark:hover:text-white">Contact</a>
    </div>

    <div class="relative hidden md:block">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 24 24" fill="none">
                <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
        </span>

        <input type="text" class="w-full border rounded-md pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-900 dark:text-white" placeholder="Search">
    </div>
</nav>

Catégories