Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de conteneur

Un composant de conteneur de portefeuille skeuomorphe avec un thème sombre et un design réactif, présentant le travail et les produits avec des éléments interactifs.

Ouvrir Aperçu

                <div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
    <h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
                <p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
        <div class="flex justify-center space-x-4">
            <a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
            </a>
        </div>
    </div>
</div>

Composant Graphiques de skeuomorphisme

Un composant de graphiques réactifs avec le style Skeuomorphism, des couleurs vives et la prise en charge du mode sombre pour les interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="container mx-auto p-4 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-lg">
        <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Community Engagement</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-gradient-to-br from-blue-400 to-blue-600 dark:from-blue-600 dark:to-blue-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Likes</h3>
                <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">12,345</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1M14 10V5a2 2 0 00-2-2h-2a2 2 0 00-2 2v5M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.382 22H6a2 2 0 01-2-2V6a2 2 0 012-2h2l1 1m0 9h.01"></path>
                    </svg>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-400 to-green-600 dark:from-green-600 dark:to-green-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Comments</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">5,678</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55a1 1 0 01-1.415 0L9 16z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-yellow-400 to-yellow-600 dark:from-yellow-600 dark:to-yellow-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Shares</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">3,210</div>
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.693c-.095.327-.119.65-.073.973.059.416.213.808.46 1.141.28.353.603.676.968.968q.333.247.666.46a2.42 2.42 0 001.141.46c.323.046.646.022.973-.073l.447-.109a1.902 1.902 0 001.058-.582A1 1 0 0117 16v-4a1 1 0 011-1h2a1 1 0 011 1v-1a1 1 0 00-1-1h-3a1 1 0 01-1-1V9a1 1 0 00-1-1H9a1 1 0 00-1 1v4a1 1 0 01-1 1h-.086z"></path>
                    </svg>
                </div>
            </div>
             <div class="bg-gradient-to-br from-red-400 to-red-600 dark:from-red-600 dark:to-red-800 p-4 rounded-lg shadow-md transform hover:scale-105 transition-transform duration-300">
                <h3 class="text-xl font-semibold mb-2 text-white">Views</h3>
                 <div class="flex items-center">
                    <div class="text-white text-3xl font-bold mr-2">45,678</div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

Composant Boutons

Un composant de boutons simple stylisé avec Material Design, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre, adapté aux sites Web d’entreprise.

Ouvrir Aperçu

                <div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
        <button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
        <button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
        <button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
        <button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
    </div>
</div>

Composant de pied de page

Un composant de pied de page simple et réactif avec des éléments de conception 3D et des tons de terre, conçu pour un blog ou un site de contenu avec prise en charge du thème sombre.

Ouvrir Aperçu

                <footer class="bg-gray-300 dark:bg-gray-800 py-8">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-auto text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-700 dark:text-gray-300 text-sm">&copy; 2023 Your Blog Name. All rights reserved.</p>
      </div>
      <div class="w-full md:w-auto text-center md:text-right">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white mx-2 text-sm">Privacy Policy</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white mx-2 text-sm">Terms of Service</a>
      </div>
    </div>
  </div>
</footer>

Skeuomorphism Triadic Simple Portfolio Header Component

Ouvrir Aperçu

                <header class="bg-gradient-to-b from-gray-200 to-gray-400 via-gray-300 dark:from-gray-800 dark:to-gray-900 dark:via-gray-700 p-6 shadow-xl">
  <div class="container mx-auto flex justify-between items-center">
    </div>
</header>

Glassmorphism Navigation latérale

Une navigation complexe et réactive dans la barre latérale Glassmorphism pour un tableau de bord avec un schéma de couleurs complémentaire, la prise en charge du mode sombre et aucun JavaScript.

Ouvrir Aperçu

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
    <!-- Sidebar -->
    <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-300 dark:border-gray-700 shadow-xl"
        style="backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.1);"
    >
        <div class="flex items-center justify-center h-16 border-b border-gray-300 dark:border-gray-700">
            <span class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</span>
        </div>
        <nav class="flex-1 px-2 py-4 space-y-2">
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-6 9l2-2m2 2l2-2"></path></svg>
                Home
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                Analytics
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >
                <svg class="w-6 h-6 mr-3" 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="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7 5h2m-2 0h-2"></path></svg>
                Reports
            </a>
            <a
                href="#"
                class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700"
            >

                <svg class="w-6 h-6 mr-3" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                Settings
            </a>
        </nav>
        <div class="flex items-center justify-center h-16 border-t border-gray-300 dark:border-gray-700">
            <img
                class="w-10 h-10 rounded-full"
                src="https://randomuser.me/api/portraits/men/75.jpg"
                alt="Avatar"
            >
            <span class="ml-2 text-sm font-semibold text-gray-800 dark:text-white">John Doe</span>
        </div>
    </div>
    <!-- Content Area (can be added here) -->
</div>

Composant de conteneur 3D

Composant de conteneur réactif pour les tableaux de bord avec une palette de couleurs vives et des éléments de conception 3D, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col justify-center items-center py-10">
    <div class="bg-gradient-to-r from-purple-400 to-pink-600 shadow-lg rounded-lg p-6 md:p-8 transform transition-all duration-300 hover:scale-105">
        <h2 class="text-white text-2xl font-bold text-center mb-4">Dashboard Overview</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Statistics</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=1" alt="Statistics Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Overview of user data and engagement metrics.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Revenue Insights</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=2" alt="Revenue Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Detailed revenue analysis for the current period.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">User Profiles</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Brief information about some users.</p>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-xl font-semibold">Latest Updates</h3>
                <img class="w-full h-32 object-cover rounded-md mt-2" src="https://picsum.photos/400/200?random=3" alt="Updates Image">
                <p class="text-gray-600 dark:text-gray-400 mt-2">Latest updates from the dashboard activities.</p>
            </div>
        </div>
        <button class="mt-4 bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300">View More Details</button>
    </div>
</div>

Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.

Ouvrir Aperçu

                <div class="flex flex-wrap justify-center space-x-4 space-y-4 p-6 bg-white dark:bg-gray-900">
  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-red-400 to-orange-400 dark:from-red-600 dark:to-orange-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Product Title</h2>
      <p class="text-gray-800 dark:text-gray-400">This is a brief description of the product that engages the reader's attention.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-blue-400 to-purple-400 dark:from-blue-600 dark:to-purple-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Another Product Title</h2>
      <p class="text-gray-800 dark:text-gray-400">This product offers great features and has received positive feedback from users.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>

  <div class="max-w-sm rounded-lg overflow-hidden shadow-lg transform transition-transform duration-300 hover:scale-105 bg-gradient-to-br from-green-400 to-teal-400 dark:from-green-600 dark:to-teal-600">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product Image">
    <div class="p-4">
      <h2 class="font-bold text-xl text-white dark:text-gray-200">Exciting New Product</h2>
      <p class="text-gray-800 dark:text-gray-400">Discover the amazing capabilities of this product that make your life easier.</p>
      <div class="flex items-center space-x-2 mt-2">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">Author Name</span>
      </div>
    </div>
  </div>
</div>

Composant CAPTCHA

Un composant CAPTCHA skeuomorphe conçu pour les interfaces de médias sociaux avec une palette de couleurs triadique, avec plusieurs éléments interactifs et la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col items-center justify-center">
    <h2 class="text-2xl font-bold text-white mb-4">Prove You're Not a Robot</h2>
    <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow-md flex items-center space-x-4">
        <img src="https://picsum.photos/50/50" alt="Random Image" class="rounded-lg shadow-lg">
        <div class="flex-1">
            <p class="text-gray-800 dark:text-gray-200 mb-2">Select all images containing:</p>
            <div class="grid grid-cols-2 gap-2">
                <img src="https://picsum.photos/100?random=1" alt="Image 1" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=2" alt="Image 2" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=3" alt="Image 3" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
                <img src="https://picsum.photos/100?random=4" alt="Image 4" class="w-full h-20 object-cover rounded-lg border-2 border-transparent hover:border-blue-500 transition duration-200 ease-in-out">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-full shadow-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        Verify
    </button>
    <p class="mt-2 text-gray-400 dark:text-gray-500 text-sm">If you are having trouble, refresh the challenge.</p>
</div>

Composant Cartes de produit

Un composant de carte produit réactif avec des micro-interactions, un design monochromatique et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
      <img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$19.99</span>
          <button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
      <img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$29.99</span>
          <button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

        <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 hover:shadow-lg">
      <img class="w-full h-48 object-cover transition duration-500 ease-in-out transform hover:scale-110" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">This is a brief description of the product, highlighting its key features.</p>
        <div class="flex items-center justify-between">
          <span class="text-xl font-bold text-gray-900 dark:text-white">$39.99</span>
          <button class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

1 ... 128 129 130 131 132 ... 242

Catégories

Tous les composants