Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de mise en page de grille

Un composant de mise en page de grille minimaliste pour le commerce électronique avec une palette de couleurs triadique et la prise en charge du mode sombre, conçu pour les expériences d’achat en ligne.

Ouvrir Aperçu

                <div class="container mx-auto px-4">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Shop Our Collection</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$39.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$49.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$59.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=4" alt="Product 4" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 4</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$69.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=5" alt="Product 5" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 5</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$79.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition ease-in-out duration-300 overflow-hidden">
      <img src="https://picsum.photos/300/200?random=6" alt="Product 6" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Title 6</h2>
        <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        <span class="block mt-2 text-lg font-bold text-gray-800 dark:text-gray-200">$89.99</span>
        <button class="mt-4 w-full bg-indigo-600 dark:bg-indigo-500 text-white px-4 py-2 rounded shadow hover:bg-indigo-700 dark:hover:bg-indigo-400 transition ease-in-out duration-300">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

Composant de commerce électronique de la carte thermique

Un composant de carte thermique minimaliste en niveaux de gris pour le commerce électronique, doté d’un design complexe et interactif. Réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-white dark:bg-gray-900 p-4 shadow-md rounded-lg">
  <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Product Activity Heat Map</h2>
  <div class="grid grid-cols-31 gap-1">
    <!-- Days of the week column -->
    <div class="col-span-1 flex flex-col justify-around">
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Mon</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Tue</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Wed</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Thu</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Fri</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sat</div>
      <div class="text-sm text-gray-600 dark:text-gray-400 text-center">Sun</div>
    </div>
    <!-- Heat map grid -->
    <div class="col-span-30 grid grid-cols-30 gap-1">
      <!-- Placeholder for days of the month (simplified) -->
      <div class="col-span-30 grid grid-cols-30 gap-1">
        
        <!-- Example cells with varying intensity -->
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
         <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
         <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 1: 10 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 2: 25 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 3: 50 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 4: 75 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 5: 100 sales"></div>
        <div class="bg-gray-200 dark:bg-gray-700 h-5 w-5 rounded-sm" title="Day 6: 12 sales"></div>
        <div class="bg-gray-300 dark:bg-gray-600 h-5 w-5 rounded-sm" title="Day 7: 30 sales"></div>
        <div class="bg-gray-400 dark:bg-gray-500 h-5 w-5 rounded-sm" title="Day 8: 60 sales"></div>
        <div class="bg-gray-500 dark:bg-gray-400 h-5 w-5 rounded-sm" title="Day 9: 80 sales"></div>
        <div class="bg-gray-600 dark:bg-gray-300 h-5 w-5 rounded-sm" title="Day 10: 110 sales"></div>
      
        <!-- ... add more cells for the rest of the month ... -->
      </div>
    </div>
  </div>
</div>

Composante des formes brutalistes

Un composant de formulaires Web conçu avec un style brutaliste avec un contraste élevé et des mises en page inhabituelles, adapté au commerce électronique et réactif avec la prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-md mx-auto p-6 bg-gray-300 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Create Your Account</h2>
    <form class="space-y-4">
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
            <input type="text" id="name" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your name" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
            <input type="email" id="email" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your email" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input type="password" id="password" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Enter your password" required />
        </div>
        <div>
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Avatar</label>
            <input type="file" id="avatar" class="w-full p-2 border border-gray-500 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" required />
            <img src="https://picsum.photos/100/100" alt="Avatar" class="mt-2 rounded-full" />
        </div>
        <button type="submit" class="w-full p-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 text-white font-bold rounded">Register</button>
    </form>
    <p class="mt-4 text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login here</a>.
    </p>
</div>

Composant d’info-bulle

Un composant d’info-bulle de style Neumorphism pour la présentation de portefeuilles avec la prise en charge du mode sombre, la conception réactive et l’utilisation de Tailwind CSS.

Ouvrir Aperçu

                <div class="relative group">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
            <h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
        </div>
    </div>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
            <p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
            <img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
        </div>
        <div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
    </div>
</div>

Barre de navigation du blog

Barre de navigation réactive avec prise en charge du mode sombre pour les sites Web de blog/contenu. Dispose d’un design minimaliste / plat avec une palette de couleurs pastel.

Ouvrir Aperçu

                <nav class="bg-pink-100 dark:bg-purple-900 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-lg font-semibold text-gray-800 dark:text-white">My Blog</a>
    <div class="flex space-x-4">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Blog</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Composants de mise en page

Un composant de mise en page de tableau de bord réactif qui utilise des micro-interactions et une palette de couleurs pastel, conçu pour afficher la visualisation des données et les panneaux de contrôle avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-white dark:bg-gray-900 flex flex-col p-5">
  <header class="flex justify-between items-center mb-5">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
    <button class="py-2 px-4 bg-blue-500 dark:bg-blue-700 text-white rounded-lg transition-transform transform hover:scale-105 hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none">Logout</button>
  </header>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-pink-100 dark:bg-pink-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Statistics</h2>
      <p class="text-gray-600 dark:text-gray-400">Here are some stats about users.</p>
      <img src="https://picsum.photos/200/100" alt="User Stats" class="mt-2 rounded-md">
    </div>

    <div class="bg-green-100 dark:bg-green-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Sales Overview</h2>
      <p class="text-gray-600 dark:text-gray-400">View the sales data.</p>
      <img src="https://picsum.photos/200/100" alt="Sales Overview" class="mt-2 rounded-md">
    </div>

    <div class="bg-blue-100 dark:bg-blue-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Recent Activity</h2>
      <p class="text-gray-600 dark:text-gray-400">Check out the latest activity.</p>
      <img src="https://picsum.photos/200/100" alt="Recent Activity" class="mt-2 rounded-md">
    </div>

    <div class="bg-yellow-100 dark:bg-yellow-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Server Status</h2>
      <p class="text-gray-600 dark:text-gray-400">Monitor server health.</p>
      <img src="https://picsum.photos/200/100" alt="Server Status" class="mt-2 rounded-md">
    </div>

    <div class="bg-purple-100 dark:bg-purple-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notifications</h2>
      <p class="text-gray-600 dark:text-gray-400">Your latest notifications.</p>
      <img src="https://picsum.photos/200/100" alt="Notifications" class="mt-2 rounded-md">
    </div>

    <div class="bg-red-100 dark:bg-red-800 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Profile</h2>
      <div class="flex items-center mt-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile" class="w-12 h-12 rounded-full mr-3">
        <p class="text-gray-600 dark:text-gray-400">John Doe</p>
      </div>
    </div>
  </div>

  <footer class="mt-5 text-center text-gray-500 dark:text-gray-400">
    <p>&copy; 2023 Dashboard. All rights reserved.</p>
  </footer>
</div>

Composant Mentions de l’utilisateur

Un utilisateur complexe mentionne un composant conçu pour les tableaux de bord avec prise en charge du mode sombre et schéma de couleurs triadique.

Ouvrir Aperçu

                <div class="bg-gray-800 dark:bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold mb-4">User Mentions</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-700">
            <thead class="bg-gray-700">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Avatar</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Username</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mentioned At</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-gray-800 divide-y divide-gray-700">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@johndoe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@janedoe</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-white">@alexsmith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5 hours ago</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm">
                        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Composant de nuage de balises Neumorphism

Un composant de nuage de balises réactif avec un design Neumorphism, une palette de couleurs pastel et des interactions complexes, conçu pour le commerce électronique. Inclut la prise en charge du mode sombre et utilise Tailwind CSS.

Ouvrir Aperçu

                <div class="p-4 dark:bg-gray-800">
  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    <div class="col-span-2 md:col-span-3 lg:col-span-4 text-center text-lg font-semibold text-gray-700 dark:text-gray-300">Popular Tags</div>
    
    <div class="bg-gray-200 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphism-light dark:shadow-neumorphism-dark flex flex-wrap gap-2 justify-center">
      <span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Electronics</span>
      <span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Apparel</span>
      <span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Home & Garden</span>
      <span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Books</span>
      <span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Toys & Games</span>
      <span class="bg-pastel-blue text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Beauty</span>
      <span class="bg-pastel-green text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Sports</span>
      <span class="bg-pastel-pink text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Outdoors</span>
      <span class="bg-pastel-yellow text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Automotive</span>
      <span class="bg-pastel-purple text-gray-800 dark:text-gray-200 px-3 py-1 rounded-full text-sm shadow-inner-neumorphism-light dark:shadow-inner-neumorphism-dark cursor-pointer hover:shadow-outer-neumorphism-light dark:hover:shadow-outer-neumorphism-dark transition-all">Jewelry</span>
    </div>
  </div>
</div>


<style>
  .shadow-neumorphism-light {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
  }
  .shadow-inner-neumorphism-light {
    box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #f2f3f7;
  }
  .dark .shadow-inner-neumorphism-dark {
     box-shadow: inset 2px 2px 5px #333, inset -5px -5px 10px #555;
  }
  .hover\:shadow-outer-neumorphism-light:hover {
    box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f3f7;
  }
   .dark .hover\:shadow-outer-neumorphism-dark:hover {
    box-shadow: 5px 5px 10px #333, -5px -5px 10px #555;
  }
  .bg-pastel-blue { background-color: #a7c7e7; }
  .bg-pastel-green { background-color: #b2dfdb; }
  .bg-pastel-pink { background-color: #f8c8dc; }
  .bg-pastel-yellow { background-color: #ffecb3; }
  .bg-pastel-purple { background-color: #e1bee7; }
</style>

Composant d’intégration de média

Un composant Media Embed réactif de style Skeuomorphique, utilisant des couleurs de couleur Terre et adapté au commerce électronique, avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-lg mx-auto p-4 bg-slate-200 dark:bg-slate-800 rounded-lg shadow-lg">
    <div class="relative overflow-hidden rounded-lg">
        <img class="w-full h-64 object-cover mb-4" src="https://picsum.photos/600/400" alt="Product Image">
        <div class="absolute top-2 right-2 bg-white dark:bg-gray-800 rounded-full shadow">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        </div>
    </div>
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Product Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a description of the product that mimics natural textures and colors, providing an earthy feel.</p>
    <div class="flex items-center justify-between">
        <span class="text-lg font-bold text-gray-900 dark:text-gray-100">$29.99</span>
        <button class="px-4 py-2 bg-green-500 dark:bg-green-700 text-white rounded-lg shadow hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
    </div>
</div>

Composant Colonnes

Composant Colonnes réactives avec mode sombre

Ouvrir Aperçu

                <div class="dark:bg-gray-900 p-8">
  <div class="container mx-auto">
    <div class="md:flex md:space-x-6">
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column One</h3>
          <p class="dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Two</h3>
          <p class="dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="md:w-1/3">
        <div class="rounded-lg shadow-md p-6 dark:bg-gray-800">
          <h3 class="text-xl font-semibold mb-4 dark:text-white">Column Three</h3>
          <p class="dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 121 122 123 124 125 ... 242

Catégories

Tous les composants