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
Composant de portefeuille interactif
Un composant de portefeuille réactif avec des micro-interactions et une palette de couleurs pastel, prenant en charge le mode sombre avec Tailwind CSS.
Composantes interactives
Un composant Web conçu avec des éléments skeuomorphes pour les interfaces de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du thème sombre.
Volet interactif sur les médias sociaux
Un composant complexe de médias sociaux avec une palette de couleurs forêt/vert avec des effets de néon/lueur, adapté aux flux interactifs avec plusieurs éléments. Comprend la conception réactive et la prise en charge du mode sombre.