Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de la liste de souhaits

Un composant de liste de souhaits réactif conçu avec des éléments 3D, des tons de terre et la prise en charge du mode sombre pour présenter des travaux ou des produits.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-transform transform hover:scale-105">  
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>  
    <ul class="space-y-4">  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=1" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 1.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=2" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 2.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
        <li class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md flex items-center">  
            <img src="https://picsum.photos/100/100?random=3" alt="Product Image" class="w-16 h-16 rounded-md mr-4 shadow-lg">  
            <div class="flex-grow">  
                <h3 class="font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3>  
                <p class="text-gray-600 dark:text-gray-400">Brief description of product 3.</p>  
            </div>  
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Add to Cart</button>  
        </li>  
    </ul>  
    <div class="mt-6">  
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Profile</h3>  
        <div class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">  
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mr-4">  
            <div>  
                <h4 class="font-medium text-gray-800 dark:text-gray-200">John Doe</h4>  
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet.</p>  
            </div>  
        </div>  
    </div>  
</div>

Composants E-commerce Skeuomorphic

Un composant E-commerce Skeuomorphic complexe, réactif et monochromatique pour les sites Web d’entreprise avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Product Card 1 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-blue-500 text-white dark:bg-blue-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">New</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Skeuomorphic Gadget Pro</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Experience the future with this innovative gadget featuring realistic textures and interactions.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$249.99</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">15</span></p>
                    <p>Shipping: <span class="font-semibold">Free</span></p>
                </div>
            </div>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-green-500 text-white dark:bg-green-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">-20%</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Classic Audio Interface</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Relive the nostalgia with this classic audio interface, meticulously crafted with skeuomorphic elements.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$199.00</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">8</span></p>
                    <p>Shipping: <span class="font-semibold">$9.99</span></p>
                </div>
            </div>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl overflow-hidden transform transition duration-500 hover:scale-105 ring-4 ring-gray-300 dark:ring-gray-600">
            <div class="relative">
                <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
                <div class="absolute top-4 right-4 bg-yellow-500 text-gray-800 dark:bg-yellow-600 dark:text-gray-200 px-3 py-1 rounded-full text-sm font-bold">Limited</div>
            </div>
            <div class="p-6">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Vintage Camera Lens</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Capture moments with this vintage-inspired lens, designed with a focus on realistic visual depth.</p>
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-gray-900 dark:text-white">$349.50</span>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transform transition duration-300 hover:scale-110 dark:bg-blue-700 dark:hover:bg-blue-800 dark:text-gray-200">
                        Add to Cart
                    </button>
                </div>
                 <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                    <p>In Stock: <span class="font-semibold">3</span></p>
                    <p>Shipping: <span class="font-semibold">$4.99</span></p>
                </div>
            </div>
        </div>

    </div>

</div>

Barre de progression du neumorphisme

Un composant réactif de barre de progression de style neumorphisme conçu pour les tableaux de bord, intégrant une fonction interactive et prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto mt-10 p-5 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200 dark:bg-teal-600 dark:text-teal-200">Task 1</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">70%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-teal-400 rounded-full transition-all duration-300 w-7/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-purple-600 bg-purple-200 dark:bg-purple-600 dark:text-purple-200">Task 2</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">40%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-purple-400 rounded-full transition-all duration-300 w-5/12"></div>
        </div>
    </div>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1">
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200 dark:bg-blue-600 dark:text-blue-200">Task 3</span>
            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400">90%</span>
        </div>
        <div class="flex items-center h-2 bg-gray-300 dark:bg-gray-600 rounded-full">
            <div class="h-full bg-blue-400 rounded-full transition-all duration-300 w-11/12"></div>
        </div>
    </div>
</div>

Composant de la liste de souhaits

Un composant de liste de souhaits simple, de style brutaliste, pour un portfolio, avec une palette de couleurs analogue à contraste élevé. Réactivité avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 dark:text-gray-100 bg-gray-100 text-gray-900 min-h-screen flex items-center justify-center">
  <div class="container mx-auto p-4">
    <div class="border-4 border-black dark:border-white p-6">
      <h2 class="text-2xl font-bold mb-4 dark:text-white text-black">Wishlist</h2>
      <div class="space-y-4">
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 1</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
        <div class="flex items-center justify-between border-2 border-black dark:border-white p-4">
          <div class="flex items-center">
            <img src="https://picsum.photos/seed/picsum/50/50" alt="Product Image" class="w-12 h-12 object-cover mr-4 border border-black dark:border-white">
            <div>
              <h3 class="font-bold dark:text-white text-black">Product Name 2</h3>
              <p class="text-sm dark:text-gray-300 text-gray-700">Category</p>
            </div>
          </div>
          <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 border border-black dark:border-white">Remove</button>
        </div>
      </div>
    </div>
  </div>
</div>

Composant d’authentification à deux facteurs

Un composant d’authentification à deux facteurs simple et réactif conçu dans un style rétro avec des tons de terre, adapté aux interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mt-10">
    <h2 class="text-center text-2xl font-bold text-brown-700 dark:text-brown-300 mb-4">Two-Factor Authentication</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-6">Secure your account with an extra layer of security.</p>
    <div class="flex justify-center mb-4">
        <img src="https://picsum.photos/100/100" alt="Auth Image" class="rounded-full shadow-md">
    </div>
    <div class="mb-4">
        <label class="block text-gray-700 dark:text-gray-300 mb-2" for="auth-code">Authentication Code</label>
        <input type="text" id="auth-code" placeholder="Enter your code" class="w-full p-2 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200">
    </div>
    <div class="flex justify-center">
        <button class="bg-brown-600 text-white font-bold py-2 px-4 rounded hover:bg-brown-500 dark:bg-brown-400 dark:hover:bg-brown-300">Verify</button>
    </div>
</div>

Composant de navigation dans la barre latérale

Un composant de navigation latéral réactif conçu dans le style Brutalism, parfait pour les applications de commerce électronique. Il présente des couleurs vives, un contraste élevé et de multiples éléments interactifs, notamment des liens vers différentes catégories d’achat, des options de compte utilisateur et un bouton d’appel à l’action dynamique pour l’accès au panier. Le design s’adapte également au mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
    <h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
    <ul class="mt-6 space-y-4">
        <li>  
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Home</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Products</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Categories</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Deals</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
                <img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
                <span>Account</span>
            </a>
        </li>
    </ul>
    <div class="mt-6">
        <a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
            <span>View Cart</span>
        </a>
    </div>
    <div class="mt-auto">
        <a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
            <span>Profile</span>
        </a>
    </div>
</div>

Composant Galerie

Un composant de galerie de style Neumorphisme avec des tons de terre à des fins de blog/contenu. Ce composant dispose d’une interface riche avec plusieurs éléments interactifs, d’un design réactif et d’une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-6 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-6">Gallery</h1>  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=1" alt="Gallery Image 1" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 1</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=2" alt="Gallery Image 2" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 2</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=3" alt="Gallery Image 3" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 3</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=4" alt="Gallery Image 4" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 4</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=5" alt="Gallery Image 5" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 5</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>    <div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow">      <img src="https://picsum.photos/300/200?random=6" alt="Gallery Image 6" class="rounded-lg mb-2">      <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Image Title 6</h2>      <p class="text-gray-600 dark:text-gray-400">Short description of the image.</p>    </div>  </div>  <div class="mt-6 text-center">    <h3 class="text-lg font-bold text-gray-700 dark:text-gray-300">Author</h3>    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="mx-auto rounded-full w-24 h-24">    <p class="text-gray-600 dark:text-gray-400">Author Name</p>  </div></div>

Composant de lecteur vidéo rétro

Un composant de lecteur vidéo interactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs en niveaux de gris et plusieurs éléments interactifs adaptés à des fins de commerce électronique, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="relative video-wrapper">
        <video controls class="w-full rounded-lg border border-gray-400" poster="https://picsum.photos/600/300?random=1">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="absolute top-3 right-3 flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-md">
            <div class="text-gray-200">
                <h3 class="text-lg font-bold">Video Title</h3>
                <p class="text-sm">Uploaded by User Name</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex justify-between items-center">
            <button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
            <button class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Buy Now</button>
        </div>
        <div class="mt-4">
            <p class="text-gray-300 text-sm">Description: This retro video player component is perfect for showcasing video content within an e-commerce platform, evoking nostalgia with its vintage styles.</p>
        </div>
    </div>
</div>

Panier d’achat rétro/vintage

Composant de panier d’achat avec un style rétro / vintage, une palette de couleurs pastel et une complexité simple. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="container mx-auto p-6 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-purple-700 dark:to-pink-700 font-mono">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
    <div class="px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Your Cart</h2>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro1/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Radical Sneakers</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$89.99</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x1</span>
      </div>
      
      <!-- Cart Item -->
      <div class="flex items-center mb-4">
        <img class="h-12 w-12 rounded-full object-cover mr-4" src="https://picsum.photos/seed/retro2/50/50" alt="Product Image">
        <div class="flex-grow">
          <p class="text-gray-700 dark:text-gray-300 font-semibold">Awesome Mixtape</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm">$12.50</p>
        </div>
        <span class="text-gray-700 dark:text-gray-300">x2</span>
      </div>
      
      <!-- Total -->
      <div class="flex justify-between items-center border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
        <p class="text-xl font-bold text-gray-800 dark:text-white">Total:</p>
        <p class="text-xl font-bold text-gray-800 dark:text-white">$114.99</p>
      </div>
      
    </div>
    
    <div class="bg-gray-200 dark:bg-gray-700 px-6 py-4">
      <button class="block w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Checkout
      </button>
    </div>
    
  </div>
</div>

Composant de navigation du fil d’Ariane

Composant de navigation Breadcrumb avec design rétro/vintage, palette de couleurs vives et niveau de complexité simple, à des fins de blog/contenu.

Ouvrir Aperçu

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3">
    <li class="inline-flex items-center">
      <a href="#" class="text-sm font-medium text-purple-700 hover:text-purple-900 dark:text-purple-400 dark:hover:text-white">
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <a href="#" class="ml-1 text-sm font-medium text-purple-700 hover:text-purple-900 md:ml-2 dark:text-purple-400 dark:hover:text-white">Articles</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="w-4 h-4 text-purple-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        <span class="ml-1 text-sm font-medium text-purple-500 md:ml-2 dark:text-gray-500">This Article</span>
      </div>
    </li>
  </ol>
</nav>

1 ... 123 124 125 126 127 ... 242

Catégories

Tous les composants