Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de plan du site

Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.

                <footer class='bg-white dark:bg-gray-900'>
    <div class='mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8'>
        <div class='grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4'>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Company</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>About Us</a>
                    <a href='#' class='hover:opacity-75'>Careers</a>
                    <a href='#' class='hover:opacity-75'>Contact Us</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Services</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Web Development</a>
                    <a href='#' class='hover:opacity-75'>Mobile Development</a>
                    <a href='#' class='hover:opacity-75'>SEO Optimization</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Legal</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Privacy Policy</a>
                    <a href='#' class='hover:opacity-75'>Terms of Service</a>
                    <a href='#' class='hover:opacity-75'>Cookie Policy</a>
                </nav>
            </div>
            <div>
                <h2 class='text-lg font-bold text-gray-900 dark:text-white'>Follow Us</h2>
                <nav class='mt-4 flex flex-col space-y-2 text-sm text-gray-600 dark:text-gray-300'>
                    <a href='#' class='hover:opacity-75'>Facebook</a>
                    <a href='#' class='hover:opacity-75'>Twitter</a>
                    <a href='#' class='hover:opacity-75'>Instagram</a>
                </nav>
            </div>
        </div>
        <div class='mt-8 border-t border-gray-100 dark:border-gray-800 pt-8 sm:flex sm:items-center sm:justify-between'>
            <p class='text-xs/relaxed text-gray-500 dark:text-gray-400'>
                © 2024 Your Company. All rights reserved.
            </p>
        </div>
    </div>
</footer>

Composant de chronologie rétro/vintage

Un composant de chronologie réactif avec un design rétro/vintage et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto px-4 py-8">
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-purple-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 1</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1985</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-pink-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 2</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1990</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
  <div class="flex flex-col md:flex-row">
    <div class="mr-10 w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-green-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 3</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">1995</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      </div>
    </div>
    <div class="w-full md:w-1/2">
      <div class="mb-8 flex items-center justify-between">
        <div class="flex items-center">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="mr-4 h-12 w-12 rounded-full border-4 border-yellow-500 object-cover">
          <div class="text-lg font-bold text-gray-800 dark:text-white">Event 4</div>
        </div>
        <div class="text-sm text-gray-600 dark:text-gray-300">2000</div>
      </div>
      <div class="mb-8 rounded-lg bg-white p-6 shadow-lg dark:bg-gray-700">
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Composant Avis sur les produits

Un composant d’avis sur les produits avec des éléments de conception 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="antialiased w-full">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-2/3 mx-auto">
        <div class="max-w-2xl mx-auto">
          <div class="mb-6 md:mb-8">
            <span class="text-lg text-blue-500 font-bold">Reviews</span>
            <h2 class="text-3xl md:text-4xl mt-2 font-bold font-heading">Customer Reviews</h2>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/33.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Alice Williams</p>
                  <p class="text-sm text-gray-500">January 20, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-gray-300 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"Absolutely love this product! The quality is top-notch, and it exceeded my expectations. Highly recommend it to everyone."</p>
            </div>
          </div>
          <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/76.jpg" alt="user avatar">
                <div class="ml-4">
                  <p class="text-lg font-semibold">Robert Johnson</p>
                  <p class="text-sm text-gray-500">January 18, 2024</p>
                </div>
              </div>
              <div class="flex items-center">
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl mr-1">&#9733;</span>
                <span class="text-yellow-500 text-xl">&#9733;</span>
              </div>
            </div>
            <div class="p-6 bg-gray-100 rounded-lg shadow-md dark:bg-gray-700">
              <p class="leading-loose text-gray-500 dark:text-gray-300">"This is by far the best purchase I

Composant Suivre le bouton

Un composant de bouton de suivi réactif conçu dans le style Material Design avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

Composant Mentions de l’utilisateur

Un utilisateur mentionne un composant utilisant Tailwind CSS avec la conception Glassmorphism, la réactivité et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg p-6">
    <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Mentions</h2>
    <div class="space-y-4">
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a comment.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a post.</p>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Mentioned you in a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Navigation collante brutaliste

Un composant de navigation autocollant de style brutaliste avec un comportement réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. Présente un contraste élevé, une typographie audacieuse et une esthétique austère et brute.

Ouvrir Aperçu

                <header class="bg-yellow-400 text-black sticky top-0 z-50 border-b-4 border-black dark:bg-purple-800 dark:text-white dark:border-white">
  <nav class="container mx-auto px-6 py-4 flex justify-between items-center">
    <div class="text-2xl font-bold uppercase tracking-tighter">Brutal Nav</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-black hover:underline dark:text-white">Home</a>
      <a href="#" class="text-black hover:underline dark:text-white">About</a>
      <a href="#" class="text-black hover:underline dark:text-white">Services</a>
      <a href="#" class="text-black hover:underline dark:text-white">Contact</a>
    </div>
    <button class="md:hidden text-black dark:text-white focus:outline-none">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-4 6h4"></path></svg>
    </button>
  </nav>
</header>

Composant de connexion sociale

Composant de connexion sociale avec interface utilisateur en mode sombre et effets réactifs

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
 <div class="w-full max-w-md p-8 space-y-6 bg-gray-800 rounded-xl shadow-lg">
 <h2 class="text-2xl font-bold text-center text-white">Sign in to your account</h2>
 <form class="space-y-4">
 <div>
 <label for="email" class="block text-sm font-medium text-gray-300">Email address</label>
 <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
 </div>
 <div>
 <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
 <input id="password" name="password" type="password" autocomplete="current-password" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
 </div>
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-700 rounded focus:ring-blue-500 bg-gray-900">
 <label for="remember-me" class="block ml-2 text-sm text-gray-300">Remember me</label>
 </div>
 <div class="text-sm">
 <a href="#" class="font-medium text-blue-500 hover:text-blue-400">Forgot your password?</a>
 </div>
 </div>
 <div>
 <button type="submit" class="w-full px-4 py-2 font-bold text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Sign in</button>
 </div>
 </form>
 <div class="relative">
 <div class="absolute inset-0 flex items-center">
 <div class="w-full border-t border-gray-700"></div>
 </div>
 <div class="relative flex justify-center text-sm">
 <span class="px-2 text-gray-400 bg-gray-800">Or continue with</span>
 </div>
 </div>
 <div class="flex mt-6 space-x-4">
 <button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
 <path d="M6.29 0H3.45L0 3.53V8.5H2.5V20H6V8.5H9.5V3.53H6.29V0Z" fill="currentColor"></path>
 </svg>
 Facebook
 </button>
 <button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-600">
 <svg viewBox="0 0 24 24" class="w-4 h-4 mr-2" fill="currentColor" aria-hidden="true">
 <path d="M12.0003 4.75C9.3703 4.75 7.17031 6.87031 7.17031 9.5C7.17031 11.1203 8.0003 12.5303 9.19031 13.4703L8.29031 14.3703C1.54031 9.5 -3.62969 18.5403 5.16031 22.2203C13.6303 25.9303 21.8303 15.3603 19.0403 9.59031C18.9203 9.33031 18.7803 9.07031 18.6403 8.82031C17.7303 7.25031 16.1703 6.01031 14.3503 5.38031L15.9703 6.73031C15.8103 6.85031 15.6603 6.98031 15.5103 7.11031C13.9903 8.45031 13.0003 9.86031 13.0003 11.5C13.0003 12.1003 13.1003 12.6703 13.2803 13.2103C13.8903 15.0203 15.4003 16.3103 17.1203 16.4103C17.4403 16.4303 17.7603 16.4403 18.0903 16.4403C18.4803 16.4403 18.8603 16.4303 19.2403 16.4C20.2303 16.3503 21.0503 15.5703 21.1103 14.5903C21.1103 14.3303 21.1103 14.0803 21.0903 13.8303C21.0903 13.7203 21.0803 13.5903 21.0803 13.4603C21.0703 13.0903 21.0503 12.7103 21.0303 12.3403L23.4403 11.3L22.7603 9.68031C21.9703 9.96031 21.1103 10.2303 20.2203 10.4303C19.8103 9.04031 18.7103 7.99031 17.3603 7.63031L16.1103 8.90031C16.1003 8.96031 16.1003 9.02031 16.0903 9.08031C15.2303 8.51031 13.9203 8.16031 12.4903 8.16031C10.0803 8.16031 8.17031 9.87031 7.56031 12.1103L6.45031 11.5803C6.24031 10.2603 6.47031 8.86031 7.14031 7.67031C8.06031 6.02031 9.89031 4.92031 11.8303 4.77031L12.0003 4.75ZM12.0003 6.75031C10.2303 6.75031 8.75031 8.23031 8.75031 10.0003C8.75031 10.8403 9.09031 11.6003 9.62031 12.1203L10.1503 11.5803L11.2903 12.7303L12.4403 13.8803C12.4403 13.8803 12.4403 13.8803 12.4303 13.8903C12.3403 13.9803 12.1903 14.1303 12.0003 14.1303C11.4503 14.1303 11.0003 13.6803 11.0003 13.1303C11.0003 12.7703 11.1403 12.4403 11.4003 12.2003C10.9703 10.5703 9.57031 9.37031 7.91031 9.13031L6.61031 8.90031C7.09031 6.69031 9.30031 5.00031 11.8303 5.00031C13.4703 5.00031 14.9803 5.87031 15.8503 7.17031L15.8703 7.19031L14.6903 8.35031L14.6903 8.35031C14.2003 7.67031 13.2103 6.75031 12.0003 6.75031V6.75031Z" fill="currentColor"></path>
 </svg>
 Google
 </button>
 </div>
 <p class="mt-8 text-sm text-center text-gray-400">
 Don't have an account?
 <a href="#" class="font-medium text-blue-500 hover:text-blue-400">Sign up</a>
 </p>
 </div>
</div>

Volet Forum communautaire

Un composant de forum communautaire réactif stylisé en mode sombre à l’aide de Tailwind CSS. Le composant présente un arrière-plan sombre pour réduire la fatigue oculaire et comprend des images de remplacement pour les avatars et les messages de forum.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg max-w-3xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Community Forum</h2>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Latest Discussions</h3>
        <div class="mt-4">
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">John Doe</h4>
                        <span class="text-gray-400 text-sm">2 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">What are the best practices for learning JavaScript?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">5 replies</span>
                    <span class="text-gray-400">10 likes</span>
                </div>
            </div>
            <div class="bg-gray-800 p-4 rounded-lg mb-4">
                <div class="flex items-center mb-2">
                    <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                    <div>
                        <h4 class="font-semibold">Jane Smith</h4>
                        <span class="text-gray-400 text-sm">3 hours ago</span>
                    </div>
                </div>
                <p class="text-gray-300">Any recommendations for a good code editor?</p>
                <div class="flex justify-between mt-2">
                    <span class="text-gray-400">2 replies</span>
                    <span class="text-gray-400">5 likes</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mb-4">
        <h3 class="text-xl font-semibold">Join the Conversation</h3>
        <form class="mt-4 space-y-4">
            <textarea class="w-full p-2 rounded-lg bg-gray-800 text-white placeholder-gray-400 resize-none" rows="4" placeholder="Share your thoughts..."></textarea>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Post</button>
        </form>
    </div>
    <div class="bg-gray-800 p-4 rounded-lg mt-4">
        <h3 class="text-xl font-semibold mb-2">Popular Topics</h3>
        <ul class="space-y-2">
            <li class="bg-gray-700 p-2 rounded">#JavaScript</li>
            <li class="bg-gray-700 p-2 rounded">#React</li>
            <li class="bg-gray-700 p-2 rounded">#TailwindCSS</li>
            <li class="bg-gray-700 p-2 rounded">#NodeJS</li>
            <li class="bg-gray-700 p-2 rounded">#WebDevelopment</li>
        </ul>
    </div>
</div>

Formulaire d’inscription

Un composant élégant de formulaire d’inscription en mode sombre utilisant Tailwind CSS, avec des champs pour les informations sur l’utilisateur et un design réactif.

Ouvrir Aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-white text-center mb-6">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="username">Username</label>
                <input type="text" id="username" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your username" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="email">Email</label>
                <input type="email" id="email" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-400 mb-2" for="password">Password</label>
                <input type="password" id="password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Enter your password" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-400 mb-2" for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" class="bg-gray-700 text-white border border-gray-600 rounded-lg w-full py-2 px-4" placeholder="Confirm your password" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <input type="checkbox" id="terms" class="text-gray-400 border-gray-600" required />
                <label for="terms" class="text-gray-400"> I agree to the terms and conditions</label>
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-500 text-white py-2 rounded-lg font-semibold">Register</button>
        </form>
        <p class="text-gray-400 text-center mt-4">Already have an account? <a href="#" class="text-blue-500 hover:underline">Login</a></p>
    </div>
    <footer class="absolute bottom-0 left-0 w-full text-center bg-gray-800 py-2 text-gray-400">© 2023 Company Name</footer>
</div>

Composant de galerie de produits

Un composant de galerie de produits avec des micro-interactions.

Ouvrir Aperçu

                
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
  <div class="-m-1 flex flex-wrap md:-m-2">
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=1" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=2" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=3" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=4" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=5" />
      </div>
    </div>
    <div class="flex w-1/3 flex-wrap">
      <div class="w-full p-1 md:p-2 transform transition duration-500 ease-in-out hover:scale-105">
        <img
          alt="gallery"
          class="block h-full w-full rounded-lg object-cover object-center"
          src="https://picsum.photos/500/300?random=6" />
      </div>
    </div>
  </div>
</div>

1 ... 222 223 224 225 226 ... 262

Catégories

Tous les composants