Composant de conteneur
Un composant de conteneur de style 3D adapté aux sites Web d’entreprise, avec des couleurs vives et des éléments interactifs, ainsi qu’un design réactif avec prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition-transform duration-300 hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-vibrant-600 shadow-md">
<h2 class="text-xl font-bold text-vibrant-600 dark:text-vibrant-300 ml-4">Business Name</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4">This container is designed to showcase important information while maintaining a 3D effect that engages users.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
<img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="w-full h-auto rounded-md mb-2">
<h3 class="font-semibold text-white">Feature One</h3>
<p class="text-white">Description of feature one with engaging content.</p>
</div>
<div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
<img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="w-full h-auto rounded-md mb-2">
<h3 class="font-semibold text-white">Feature Two</h3>
<p class="text-white">Description of feature two with engaging content.</p>
</div>
</div>
</div>Composants associés
Glassmorphism Portfolio Conteneur
Un composant de conteneur Glassmorphism réactif avec prise en charge du mode sombre adapté à un site Web de portfolio utilisant Tailwind CSS. Il présente un effet de verre givré, une palette de couleurs triadique, plusieurs éléments interactifs et utilise picsum.photos pour les images et randomuser.me pour les avatars.
Composant de conteneur
Un composant de conteneur réactif simple pour la consommation de blog/contenu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Material Design Conteneur E-commerce
Composant de conteneur d’e-commerce réactif avec une grille de produits, un récapitulatif du panier d’achat et la prise en charge du thème sombre, conçu à l’aide des principes de conception matérielle et d’une palette de couleurs Earth Tones. Il comporte plusieurs éléments interactifs, notamment des fiches produits avec des images, des titres, des prix et des boutons « Ajouter au panier », ainsi qu’un récapitulatif du panier d’achat qui se met à jour avec les articles ajoutés. La mise en page s’adapte aux différentes tailles d’écran, et tous les éléments ont des styles de mode sombre définis avec les préfixes Tailwind CSS dark :.