Tous les composants

Composant Colonnes

Un composant de colonnes réactives conçu selon les principes de Material Design, utilisant Tailwind CSS pour le style, la prise en charge des thèmes sombres et les animations réactives.

Ouvrir l’aperçu

                <div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
        </div>
        <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
            <img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
        </div>
    </div>
</div>

Formulaire de connexion rétro

Un composant de formulaire de connexion de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
    <div class="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full dark:bg-gray-800">
        <h2 class="text-2xl font-bold text-center text-purple-700 dark:text-purple-300 mb-6">Login to Your Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-200 mb-1" for="password">Password</label>
                <input type="password" id="password" placeholder="********" class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" required />
            </div>
            <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-800">Login</button>
        </form>
        <p class="text-center text-gray-600 dark:text-gray-400 mt-4">
            <a href="#" class="hover:underline">Forgot Password?</a>
        </p>
        <div class="flex items-center justify-center mt-4">
            <img src="https://picsum.photos/40/40" alt="Placeholder Avatar" class="rounded-full mr-2" />
            <span class="text-gray-700 dark:text-gray-300">Login with Random User</span>
        </div>
    </div>
</div>

Composant Boutons de partage social

Un composant minimaliste de boutons de partage social conçu avec Tailwind CSS, avec une mise en page réactive et une prise en charge du thème sombre. Le composant comprend des boutons de partage sur les plateformes de médias sociaux populaires avec des éléments de conception simples et épurés.

Ouvrir l’aperçu

                <div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
        <span class="text-gray-800 dark:text-gray-200">Share with:</span>
    </div>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
    </a>
</div>

Composant Boutons de partage social

Un composant réactif de boutons de partage social stylisé avec une esthétique rétro/vintage des années 80/90, avec la prise en charge du thème sombre à l’aide de Tailwind CSS et d’images de remplacement.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

Composant de navigation 3D

Un composant de navigation 3D réactif conçu avec Tailwind CSS, avec la prise en charge des thèmes sombres et des éléments tridimensionnels attrayants.

Ouvrir l’aperçu

                <nav class="bg-gray-800 shadow-xl p-4 rounded-lg">
  <div class="flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
      <h1 class="text-white ml-2 text-2xl font-bold">MyWebsite</h1>
    </div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Home</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">About</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Services</a>
      <a href="#" class="text-white px-3 py-2 rounded-lg transition transform hover:scale-105 hover:shadow-lg">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="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-7 6h7" />
        </svg>
      </button>
    </div>
  </div>
  <div class="md:hidden mt-2">
    <div class="flex flex-col space-y-2">
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Home</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">About</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Services</a>
      <a href="#" class="text-gray-200 text-lg px-3 py-2 rounded-lg hover:bg-gray-700 transition-transform transform hover:scale-105">Contact</a>
    </div>
  </div>
</nav>
<style>
  @media (prefers-color-scheme: dark) {
    nav {
      background-color: #1a202c;
    }
    .text-white {
      color: #f7fafc;
    }
    .text-gray-200 {
      color: rgba(255, 255, 255, 0.7);
    }
    .hover\:bg-gray-700:hover {
      background-color: #4a5568;
    }
    nav a:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
</style>

Composant Filtres

Un composant de filtres réactif conçu pour l’interface utilisateur en mode sombre à l’aide de Tailwind CSS. Il comprend des options pour filtrer le contenu, utilise des arrière-plans sombres et économise la batterie.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <form>
        <div class="mb-4">
            <label for="category" class="block text-sm font-medium mb-2">Category</label>
            <select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
                <option>All</option>
                <option>Technology</option>
                <option>Health</option>
                <option>Education</option>
                <option>Fashion</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium mb-2">Rating</label>
            <div class="flex space-x-1">
                <input type="radio" id="star5" name="rating" value="5" class="hidden">
                <label for="star5" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star4" name="rating" value="4" class="hidden">
                <label for="star4" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star3" name="rating" value="3" class="hidden">
                <label for="star3" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star2" name="rating" value="2" class="hidden">
                <label for="star2" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star1" name="rating" value="1" class="hidden">
                <label for="star1" class="cursor-pointer text-yellow-500">★</label>
            </div>
        </div>
        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold mb-2">Featured Items</h3>
        <div class="grid grid-cols-1 gap-4">
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
        </div>
    </div>
</div>

Composant du lecteur vidéo

Un composant de lecteur vidéo de style rétro/vintage avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg shadow-lg max-w-md w-full">
    <div class="relative w-full pt-9/16">
        <iframe class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div class="flex justify-between items-center w-full mt-4 text-white">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <span class="font-bold">Username</span>
        </div>
        <div class="flex items-center">
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded">
                Play
            </button>
            <button class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 ml-2 rounded">
                Pause
            </button>
        </div>
    </div>
    <div class="flex flex-col w-full mt-4">
        <input type="range" class="appearance-none w-full h-2 bg-gray-600 rounded-lg" value="50" />
        <div class="flex justify-between text-xs text-gray-400">
            <span>0:00</span>
            <span>3:45</span>
        </div>
    </div>
</div>

<style>
    .pt-9\/16 {
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }

    .dark {
        background-color: #1F2937;
    }
    .dark .bg-gray-800 {
        background-color: #4B5563;
    }
</style>

Composant d’affichage des prix

Composant d’affichage des prix de style 3D qui prend en charge le mode sombre et les effets réactifs, mettant en valeur les détails du prix du produit.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
        <div class="flex flex-row items-baseline mb-4">
            <span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
        </div>
        <button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</button>
    </div>
</div>

Composante de rétroaction

Il s’agit d’un composant de feedback minimaliste doté d’un design réactif, d’une prise en charge du thème sombre et de l’absence de JavaScript. Il comprend un avatar, un texte de commentaires d’utilisateur et des évaluations représentées par des étoiles.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-shadow duration-300 ease-in-out">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center">
            <span class="text-yellow-500">
                📍📍📍📍📍
            </span>
            <span class="text-gray-500 dark:text-gray-400 ml-2">Rating: 4.5/5</span>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a sample feedback message from the user. It highlights the positive aspects and any areas for improvement.
    </p>
    <div class="mt-4">
        <img class="rounded-md" src="https://picsum.photos/400/200" alt="Feedback Image">
    </div>
</div>

Composant Avis sur les produits

Un composant minimaliste d’avis sur les produits conçu à l’aide de Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="px-6 py-4">
        <h2 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Name</h2>
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full mr-2" src="https://i.pravatar.cc/150?img=1" alt="User Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-gray-300 leading-none">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">March 10, 2022</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This product exceeded my expectations! Great quality and fast shipping.</p>
        <div class="flex items-center">
            <span class="text-yellow-400">
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-5 h-5"><path d="M12 .587l3.668 7.568 8.332 1.283-6 5.835 1.415 8.318L12 18.897l-7.415 3.885 1.415-8.318-6-5.835 8.332-1.283z"/></svg>
            </span>
            <span class="ml-3 text-gray-600 dark:text-gray-400">5/5</span>
        </div>
    </div>
    <div class="border-t border-gray-200 dark:border-gray-700">
        <div class="px-6 py-4 text-center">
            <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Read More</button>
        </div>
    </div>
</div>

Catégories