Tous les composants

Composant Messages d’erreur

Un composant de messages d’erreur minimaliste 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 mt-8 p-4 bg-white shadow-md rounded-lg dark:bg-gray-800">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
        <h2 class="ml-3 text-xl font-semibold text-gray-900 dark:text-white">Error Title</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is an error message that summarizes the issue. Please check the details and try again.</p>
    <div class="mt-4">
        <img src="https://picsum.photos/400/200" alt="Error Illustration" class="w-full h-auto rounded-md">
    </div>
    <div class="mt-4 flex justify-between">
        <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">
            Retry
        </button>
        <button class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700">
            Dismiss
        </button>
    </div>
</div>

Composant du conteneur 30

Un composant de conteneur de conception 3D réactif qui intègre des éléments tridimensionnels pour plus de profondeur et d’engagement avec la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
    <div class="p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">3D Design Container</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">This container showcases a 3D design style with engaging depth. It looks appealing in both light and dark themes.</p>
        <div class="flex items-center">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
                <p class="text-gray-500 dark:text-gray-400">User Role</p>
            </div>
        </div>
    </div>
    <div class="relative overflow-hidden">
        <img class="w-full h-48 object-cover transform transition-transform duration-300"
            src="https://picsum.photos/800/400?random=1" alt="Random Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black opacity-30"></div>
    </div>
</div>

Composant de disposition de grille 29

Un composant de mise en page de grille réactif conçu dans un style brutaliste avec un contraste élevé et des mises en page inhabituelles, prenant en charge le mode sombre avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
  <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-100">Brutalist Grid Layout</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 1</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 2</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=3" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 3</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=4" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 4</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=5" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 5</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4">
      <img src="https://picsum.photos/200/300?random=6" alt="Placeholder Image" class="object-cover h-48 rounded-lg">
      <h2 class="text-xl font-bold text-gray-800 dark:text-gray-100 mt-2">Card Title 6</h2>
      <p class="text-gray-600 dark:text-gray-300">This is a description for the card. It features a bold layout and striking contrast.</p>
    </div>
  </div>
</div>

Curseur de carrousel Composant 28

Un composant de curseur de carrousel minimaliste doté d’un design réactif et d’une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="relative bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3" class="w-full h-auto" />
            </div>
        </div>
    </div>
    <div class="absolute inset-0 flex items-center justify-between p-4">
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10094;
        </button>
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10095;
        </button>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1F2937;
        }
        .hover\:bg-gray-600:hover {
            background-color: #4B5563;
        }
    }
</style>

Composant de la barre latérale 27

Un composant de barre latérale de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
    <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
    </div>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
                <span class="text-gray-800 dark:text-white">Dashboard</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
                <span class="text-gray-800 dark:text-white">Profile</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
                <span class="text-gray-800 dark:text-white">Settings</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
                <span class="text-gray-800 dark:text-white">Messages</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
                <span class="text-gray-800 dark:text-white">Logout</span>
            </a>
        </li>
    </ul>
</div>

Notifications Composante 26

Un composant de notifications minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre, affichant une liste de notifications avec des avatars et des images.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4">Notifications</h2>
    <div class="space-y-3">
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe liked your post</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Just now</p>
            </div>
            <img src="https://picsum.photos/40/40" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith commented on your photo</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">5 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/41" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
        
        <!-- Notification Item -->
        <div class="flex items-start bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Mark Wilson started following you</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">10 minutes ago</p>
            </div>
            <img src="https://picsum.photos/40/42" alt="Image" class="w-10 h-10 rounded-lg ml-2">
        </div>
    </div>
</div>

Composantes interactives Composante 25

Un composant interactif de style Material Design avec une disposition en grille, un design réactif et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
  <div class="flex items-center space-x-4">
    <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <h2 class="text-xl font-bold text-gray-800 dark:text-white">John Doe</h2>
      <p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
    </div>
  </div>

  <div class="mt-4">
    <img class="w-full rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random Image">
  </div>

  <div class="mt-4">
    <h3 class="text-lg font-semibold text-gray-800 dark:text-white">About Me</h3>
    <p class="text-gray-600 dark:text-gray-400">I'm a passionate software engineer with experience in building web applications. I love coding and exploring new technologies.</p>
  </div>

  <div class="mt-4 flex justify-between">
    <a href="#" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Connect</a>
    <a href="#" class="px-4 py-2 border border-gray-300 text-gray-600 rounded-lg hover:border-gray-400 dark:border-gray-700 dark:text-gray-400">Message</a>
  </div>
</div>

Composant du système d’évaluation 24

Un composant de système de classification conçu en 3D qui prend en charge les thèmes sombres et les effets réactifs. Ce composant comporte des étoiles pour les notes, les avatars des utilisateurs et une section de commentaires.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full shadow-md border-2 border-white" 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>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
        </div>
        <div class="flex mt-4 space-x-1">
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
        </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
        <img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
    </div>
</div>

Volet de rétroaction 23

Un composant de retour d’information conçu dans le style Material Design, avec des animations réactives et la prise en charge des thèmes sombres, construit avec Tailwind CSS.

Ouvrir l’aperçu

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-md mx-auto transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
        <div>
            <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">This is an example feedback component for showcasing how user feedback can be displayed using Material Design principles. It supports dark mode with Tailwind CSS.</p>
    <img src="https://picsum.photos/200/100" alt="Feedback Image" class="w-full rounded-md mb-4">
    <div class="flex justify-between">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200 ease-in-out">Like</button>
        <button class="bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-200 ease-in-out">Reply</button>
    </div>
</div>

Composant d’affichage des prix 22

Un composant d’affichage de prix minimaliste qui met en valeur l’image, le nom, le prix et un bouton d’un produit à ajouter au panier. Conçu avec une réactivité et une prise en charge des thèmes sombres à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
        <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
    </div>
</div>

Catégories