Composante des composantes interactives
Composants interactifs Composant Glassmorphism
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg w-96">
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
<span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
</div>
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt Light Pink Product Image">
<p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here. It should be concise and informative.</p>
<button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Add to Cart</button>
</div>
</div>
Composants associés
Composante des composantes interactives
Un composant complexe et interactif de style Neumorphisme avec une palette de couleurs vives, conçu pour les sites Web d’alimentation/restaurants. Il comprend des boutons interactifs, des curseurs et des éléments de sélection, avec une prise en charge du mode sombre et une réactivité totale.
Composante des composantes interactives
Un composant interactif d’inspiration brutaliste pour un blog, avec des tons de terre à contraste élevé, un design réactif et la prise en charge du mode sombre.
BrutalismePortfolioInteractif
Composant de composants interactifs avec un design brutaliste, des couleurs vives et une mise en page complexe à des fins de portefeuille, réactif avec prise en charge du thème sombre.