Rechercher des composants

Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant du lecteur vidéo

Composant de lecteur vidéo réactif avec mode sombre

                <div class="aspect-w-16 aspect-h-9 bg-gray-900 dark:bg-gray-800 rounded-lg overflow-hidden">
  <video controls class="w-full h-full object-cover">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Un composant de navigation réactif conçu pour la consommation de blog/contenu avec un style de conception 3D, une palette de couleurs complémentaire et une complexité modérée intégrant certaines fonctionnalités interactives.

Ouvrir Aperçu

                <nav class="bg-gray-800 text-white shadow-lg p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <div>
            <a href="#" class="text-xl font-bold hover:text-blue-400 transition duration-300">BlogLogo</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Home</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">About</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Blog</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Contact</a>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 space-x-4">
        <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-md px-3 py-2 w-full max-w-xs mr-2 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:focus:ring-blue-600" />
        <button class="bg-blue-500 text-white rounded-md px-3 py-2 transition duration-300 hover:bg-blue-600 dark:hover:bg-blue-700">Search</button>
    </div>
</nav>

<!-- Responsive Design -->
<div class="relative mt-10 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/300" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/301" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
    </div>
</div>

<!-- Avatar Section -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg dark:bg-gray-900 mt-6">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500" />
        <div>
            <h3 class="text-lg font-bold text-white">Author Name</h3>
            <p class="text-gray-400">Author Bio or description goes here. Sharing insights and stories.</p>
        </div>
    </div>
</div>

Composant de barre latérale rétro

Un composant de barre latérale réactif avec un design rétro/vintage pour présenter du travail ou des produits, utilisant une palette de couleurs en niveaux de gris et des classes CSS Tailwind, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
    <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <div class="flex-grow p-4">
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Home</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">About</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Projects</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Contact</span>
            </a>
        </div>
    </div>
    <div class="p-4 text-center bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-600 dark:text-gray-300">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</div>

Glassmorphism CAPTCHA Component

Un composant CAPTCHA simple avec un style de design glassmorphism. Idéal pour les sites Web de commerce électronique, avec un effet translucide semblable à du verre givré, la prise en charge du mode sombre et une palette de couleurs en niveaux de gris.

Ouvrir Aperçu

                <div class="flex justify-center items-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Please Verify You Are Human</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-6">To continue with your shopping, please complete the CAPTCHA below.</p>
        <div class="flex justify-center mb-4">
            <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="rounded-lg shadow-md" />
        </div>
        <div class="flex justify-center items-center">
            <input type="text" placeholder="Enter text from image" class="border border-gray-300 dark:border-gray-600 rounded-md p-2 w-1/2 bg-transparent text-gray-900 dark:text-gray-100" />
            <button class="ml-2 bg-gray-800 dark:bg-gray-500 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-400">Verify</button>
        </div>
        <div class="flex justify-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-12 h-12 border-2 border-white dark:border-gray-700" />
        </div>
    </div>
</div>

Composant Colonnes

Un composant de colonnes conçu avec le style Glassmorphism, des couleurs vives et une disposition simple, adaptée à un tableau de bord.

Ouvrir Aperçu

                <div class="flex flex-col md:flex-row md:space-x-4 p-6 bg-gray-900 dark:bg-gray-800 rounded-lg backdrop-blur-lg border border-transparent border-gray-600">
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 1</h2>
        <img src="https://picsum.photos/200/100" alt="Image 1" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the first column. Use this space to display key metrics or important information.</p>
    </div>
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 2</h2>
        <img src="https://picsum.photos/200/100" alt="Image 2" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the second column. Provide insights, visualizations, or controls related to the data here.</p>
    </div>
    <div class="flex-1 p-4 bg-white bg-opacity-20 rounded-lg shadow-md dark:bg-gray-700">
        <h2 class="text-xl font-bold text-white mb-2">Column 3</h2>
        <img src="https://picsum.photos/200/100" alt="Image 3" class="w-full rounded-lg mb-2" />
        <p class="text-white">This is a description for the third column. Summary or additional data visuals can fit nicely in this space.</p>
    </div>
</div>

Rétro Ajouter au panier Bouton

Bouton « Ajouter au panier » réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une complexité modérée pour un tableau de bord. Prend en charge le mode sombre.

Ouvrir Aperçu

                <button class="add-to-cart-button bg-teal-500 text-white py-2 px-4 rounded-lg border-2 border-pink-600 font-bold uppercase text-lg tracking-wider shadow-lg transform transition duration-300 hover:scale-105 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50 dark:bg-teal-700 dark:border-pink-400 dark:hover:bg-teal-800 dark:focus:ring-pink-400">
  Add to Cart
</button>

Composant du système d’évaluation

Un composant de système de notation réactif avec prise en charge du thème sombre, conçu dans un style minimaliste/plat avec une palette de couleurs pastel pour les interfaces de médias sociaux. Il s’agit d’un composant complexe avec de multiples éléments interactifs.

Ouvrir Aperçu

                <div class="flex items-center justify-center bg-gray-100 dark:bg-gray-800 p-4 min-h-screen">
  <div class="w-full max-w-sm bg-white dark:bg-gray-700 rounded-lg shadow-md p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Rate this item</h2>

    <div class="flex items-center space-x-2 mb-6">
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
      <svg class="w-8 h-8 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.546 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.791.565-1.842-.197-1.546-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
      </svg>
    </div>

    <textarea
      class="w-full px-3 py-2 text-gray-700 dark:text-gray-200 border rounded-lg focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-600 dark:border-gray-500"
      rows="4"
      placeholder="Write your review..."
    ></textarea>

    <div class="mt-4 flex justify-end">
      <button
        class="px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-700"
      >
        Submit
      </button>
    </div>
  </div>
</div>

Composant de navigation

Un composant de navigation simple conçu pour un blog avec des micro-interactions et une palette de couleurs pastel. Il dispose d’une mise en page réactive et d’un support de thème sombre.

Ouvrir Aperçu

                <nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
            <span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
        </div>
        <ul class="flex space-x-6">
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
            </li>
            <li>
                <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Composant d’affichage des prix

Un composant d’affichage de prix complexe et réactif pour un tableau de bord, avec prise en charge du thème sombre, utilisant Tailwind CSS dans un design plat minimaliste en niveaux de gris.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-sm w-full">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Current Price</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Updated: Just Now</span>
  </div>
  <div class="flex items-center mb-6">
    <div class="text-4xl font-bold text-gray-900 dark:text-white">$1,234.56</div>
    <div class="flex items-center ml-4">
      <svg class="w-5 h-5 text-green-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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
      <span class="text-lg font-semibold text-green-500">+1.23%</span>
    </div>
  </div>
  <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
    <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">Historical Data:</div>
    <div class="flex space-x-4">
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">High</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,250.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Low</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,200.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Volume</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">10k</div>
      </div>
    </div>
  </div>
</div>

Retour en haut du bouton

Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.

Ouvrir Aperçu

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-blue-500 text-white p-3 rounded-full shadow-md transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-blue-700 dark:text-gray-200">
    <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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
  </a>
</div>

<style>
  /* This simple example uses CSS for smooth scrolling. For a production site, you might use a small amount of JavaScript for better compatibility and control over the scroll behavior and when the button appears. */
  html {
    scroll-behavior: smooth;
  }

  /* Basic example to show/hide the button based on scroll position. 
     A robust solution would involve JavaScript Intersection Observer or scroll events. */
  body:before {
    content: "";
    height: 200vh; /* Simulate a long page */
    display: block;
  }

  .group-hover\:opacity-100:hover + .fixed a {
      opacity: 1; /* This part is flawed for demonstrating scroll-based visibility without JS */
  }

  /* A better approach for scroll-based visibility would require JavaScript */
  .fixed a {
      /* Initially hidden, JS would make it visible on scroll */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
  }


</style>

1 ... 184 185 186 187 188 ... 315

Rechercher des composants

Catégories

Tous les composants