Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant Boutons OAuth

Boutons OAuth skeuomorphes conçus pour imiter des éléments du monde réel avec des tons Terre, destinés aux interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md space-y-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Sign in with</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-[#e2b693] hover:bg-[#d1a579] dark:bg-[#704d3b] dark:hover:bg-[#6a4334] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-[#94685b] hover:bg-[#805850] dark:bg-[#573c33] dark:hover:bg-[#4c3330] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-[#574d44] hover:bg-[#4e422a] dark:bg-[#383025] dark:hover:bg-[#2e261e] rounded-lg p-4 shadow-lg transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Twitter" class="w-6 h-6 rounded-full mr-2" />
            <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Twitter</span>
        </a>
    </div>
</div>

Composant Badges

Un composant de badges réactifs avec le style Material Design, la prise en charge du thème sombre et la palette de couleurs Earth Tones pour le contenu du blog.

Ouvrir Aperçu

                <div class="flex flex-wrap justify-center p-6 bg-white dark:bg-gray-800">
    <div class="m-4">
        <div class="bg-green-200 dark:bg-green-600 text-green-800 dark:text-green-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Author: John Doe</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-brown-200 dark:bg-brown-600 text-brown-800 dark:text-brown-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=1" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Category: Nature</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-amber-200 dark:bg-amber-600 text-amber-800 dark:text-amber-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://picsum.photos/40/40?random=2" alt="Image" class="w-8 h-8 rounded-full inline mr-2">
            <span>Tag: Environment</span>
        </div>
    </div>
    <div class="m-4">
        <div class="bg-yellow-200 dark:bg-yellow-600 text-yellow-800 dark:text-yellow-200 px-4 py-2 rounded-full shadow-md">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline mr-2">
            <span>Contributor: Jane Smith</span>
        </div>
    </div>
</div>

Composant de lecteur vidéo avec style Glassmorphism, schéma de couleurs analogue et complexité modérée à des fins de blog/contenu, avec une conception réactive et une prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de Javascript.

Ouvrir Aperçu

                <div class="dark:bg-gray-900 dark:text-white py-12">
  <div class="container mx-auto px-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden lg:flex lg:max-w-6xl mx-auto">
      <div class="lg:w-1/2">
        <div class="relative" style="padding-top: 56.25%;">
          <iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/your_video_id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
        </div>
      </div>
      <div class="lg:w-1/2 p-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Video Title</h2>
        <p class="text-gray-600 dark:text-gray-300 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <div class="mt-4 flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">Posted on May 15, 2023</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Example of Glassmorphism effect on a separate element -->
    <div class="mt-12 max-w-4xl mx-auto backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-700 rounded-lg p-6">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Effect Example</h3>
      <p class="text-gray-700 dark:text-gray-200">This is an example of a frosted glass-like element with a blur effect, demonstrating the Glassmorphism style.</p>
    </div>

  </div>
</div>

Composant d’intégration de média rétro

Un composant d’intégration multimédia réactif avec un design rétro/vintage, des couleurs vives, une complexité modérée et une prise en charge du mode sombre, adapté aux plateformes de commerce électronique.

Ouvrir Aperçu

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition duration-300 ease-in-out transform hover:scale-105">
  <div class="relative">
    <img class="w-full h-48 object-cover object-center" src="https://picsum.photos/seed/retro-media/600/400" alt="Retro media visual">
    <div class="absolute top-0 right-0 bg-yellow-400 text-gray-800 text-xs font-bold px-2 py-1 m-2 rounded-md">Featured</div>
  </div>
  <div class="px-6 py-4">
    <h3 class="font-bold text-xl text-gray-800 dark:text-white mb-2">Awesome Product Title</h3>
    <p class="text-gray-700 dark:text-gray-300 text-base">This is a brief description of the product, highlighting its key features and benefits in a retro style.</p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#retro</span>
    <span class="inline-block bg-green-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2 mb-2">#vintage</span>
    <span class="inline-block bg-red-500 rounded-full px-3 py-1 text-sm font-semibold text-white mb-2">#ecommerce</span>
  </div>
  <div class="px-6 py-4 flex justify-between items-center bg-gray-100 dark:bg-gray-700">
    <span class="font-bold text-xl text-gray-900 dark:text-white">$49.99</span>
    <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">Add to Cart</button>
  </div>
</div>

Composant Boutons OAuth

Composant de boutons OAuth réactifs pour l’interface utilisateur de commerce électronique en mode sombre avec palette de couleurs pastel.

Ouvrir Aperçu

                ```html

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 p-4">

  <div class="w-full max-w-sm">

    <h2 class="text-2xl font-bold text-center text-gray-200 mb-6">Sign In</h2>



    <button class="w-full bg-blue-300 text-blue-900 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-blue-400 transition duration-300">

      <img src="https://img.icons8.com/color/16/000000/google-logo.png" alt="Google Icon" class="mr-2">

      Sign in with Google

    </button>



    <button class="w-full bg-gray-300 text-gray-800 py-2 px-4 rounded-md flex items-center justify-center mb-4 hover:bg-gray-400 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/000000/github.png" alt="GitHub Icon" class="mr-2 dark:filter dark:invert">

      Sign in with GitHub

    </button>



    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md flex items-center justify-center hover:bg-blue-600 transition duration-300">

      <img src="https://img.icons8.com/ios-filled/16/ffffff/facebook-new.png" alt="Facebook Icon" class="mr-2">

      Sign in with Facebook

    </button>

  </div>

</div>

```

Composant Cartes de produit

Un composant de carte produit réactif conçu dans un style minimaliste avec une palette de couleurs pastel, adapté aux sites Web d’entreprise ou d’entreprise, et inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="container mx-auto p-6">
    <h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Product Cards</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-shadow duration-300 hover:shadow-xl">
            <div class="p-4">
                <img src="https://picsum.photos/300/203" alt="Product Image" class="w-full h-48 object-cover rounded-md">
            </div>
            <div class="p-4">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h3>
                <p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the product, highlighting its features and benefits in a simple and clear manner.</p>
            </div>
            <div class="p-4 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center justify-between">
                    <span class="text-gray-800 dark:text-gray-200 font-semibold">$99.99</span>
                    <button class="bg-primary text-white px-4 py-2 rounded-md hover:bg-opacity-80 transition">
                        Add to Cart
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

Composant de navigation en pied de page

Un composant de navigation en pied de page réactif avec un style de design rétro/vintage, utilisant des couleurs vives et adapté aux interfaces de médias sociaux.

Ouvrir Aperçu

                <footer class="bg-gradient-to-b from-purple-500 to-pink-600 dark:from-purple-900 dark:to-pink-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
      <div class="text-white text-center mb-4 md:mb-0">
        <h2 class="text-2xl font-bold">Stay Connected</h2>
        <p class="text-sm">Follow us on our social channels</p>
      </div>
      <div class="flex space-x-4">
        <a href="https://facebook.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="inline-block">
        </a>
        <a href="https://twitter.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="inline-block">
        </a>
        <a href="https://instagram.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=3" alt="Instagram" class="inline-block">
        </a>
        <a href="https://linkedin.com" class="text-white hover:underline">
          <img src="https://picsum.photos/30/30?random=4" alt="LinkedIn" class="inline-block">
        </a>
      </div>
    </div>
  </div>
  <div class="text-center text-white text-sm mt-4">
    <p>&copy; 2023 Your Company. All rights reserved.</p>
  </div>
</footer>

RetroVintageComparaison de produits

Composant de comparaison de produits rétro/vintage pour tableau de bord. Conception monochromatique simple avec prise en charge du mode sombre. Utilise Tailwind CSS.

Ouvrir Aperçu

                <div class="container mx-auto p-4 font-mono">

  <!-- Product Comparison Table -->
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Comparison</h2>

    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
      <thead>
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Feature</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product A</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product B</th>
        </tr>
      </thead>
      <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Price</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$19.99</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">$24.50</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Rating</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.5 stars</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">4.8 stars</td>
        </tr>
        <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 1</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
         <tr>
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Feature 2</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">No</td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Yes</td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

Composant CAPTCHA - Brutalisme Vibrant Modéré

Un composant CAPTCHA brutaliste pour un tableau de bord aux couleurs vives et à la complexité modérée.

Ouvrir Aperçu

                <div class="dark:bg-zinc-900 p-6 rounded-lg shadow-xl dark:shadow-none border-4 border-black dark:border-white">
  <h2 class="text-2xl font-bold mb-4 text-black dark:text-white">Verify You Are Not a Robot</h2>
  <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
    <div id="captcha-image" class="w-full md:w-1/2 h-32 bg-gray-300 dark:bg-zinc-700 flex items-center justify-center text-black dark:text-white text-4xl font-mono border-2 border-black dark:border-white">
      <!-- CAPTCHA image or text will be generated here -->
      <span class="select-none">Aj9pQ</span>
    </div>
    <div class="w-full md:w-1/2">
      <label for="captcha-input" class="block text-sm font-medium text-black dark:text-white mb-2">Enter the text in the image:</label>
      <input type="text" id="captcha-input" class="w-full px-4 py-2 border-2 border-black dark:border-white bg-white dark:bg-zinc-800 text-black dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500">
    </div>
  </div>
  <button class="mt-6 w-full bg-yellow-500 text-black dark:bg-yellow-600 dark:text-zinc-900 font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-500 transition duration-300">
    Submit
  </button>
  <button class="mt-4 w-full text-black dark:text-white font-bold py-3 px-6 border-4 border-black dark:border-white hover:bg-gray-200 dark:hover:bg-zinc-700 transition duration-300">
    Refresh CAPTCHA
  </button>
</div>

Composant Mentions de l’utilisateur

Un composant simple et réactif avec une conception Skeuomorphism, un schéma de couleurs analogue et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <p class="text-gray-800 dark:text-gray-200 font-semibold text-lg">John Doe</p>
  </div>
  <p class="text-gray-700 dark:text-gray-300">
    Mentioned you in a comment: 
    <span class="text-blue-600 dark:text-blue-400">@JaneSmith</span> This is a great point!
  </p>
</div>

1 ... 105 106 107 108 109 ... 262

Catégories

Tous les composants

Composant Boutons OAuth

Composant Badges

Composant du lecteur vidéo

Composant d’intégration de média rétro

Composant Boutons OAuth

Composant Cartes de produit

Composant de navigation en pied de page

RetroVintageComparaison de produits

Composant CAPTCHA - Brutalisme Vibrant Modéré

Composant Mentions de l’utilisateur