Composante des composantes interactives
Un composant interactif pour les médias sociaux conçu avec un mode sombre et une palette de couleurs monochromatiques.
HTML Code
<div class="bg-gray-900 text-gray-100 min-h-screen p-6">
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg">
<div class="p-4 border-b border-gray-700">
<h2 class="text-xl font-bold">Interactive Components</h2>
<p class="text-gray-400">Engage with your network in style.</p>
</div>
<div class="flex items-center p-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h3 class="font-semibold">John Doe</h3>
<p class="text-gray-500 text-sm">@johndoe</p>
</div>
</div>
<div class="p-4">
<img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/500/300" alt="Interactive Image" />
<p class="mt-2 text-gray-300">This is an example of an interactive post with an image. Feel free to comment and like!</p>
</div>
<div class="flex justify-between p-4 border-t border-gray-700">
<button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Like</button>
<button class="bg-gray-700 hover:bg-gray-600 rounded-lg px-4 py-2 text-white transition duration-150 ease-in-out">Comment</button>
</div>
</div>
</div>Composants associés
Fiche produit brutaliste
Un composant simple de carte produit interactive pour le e-commerce, avec un design brutaliste en niveaux de gris. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier ». Le composant est réactif et prend en charge le mode sombre. Des effets de survol sont inclus pour l’interactivité.
Composante des composantes interactives
Un composant CRM/Business Tools avec un style de design Memphis, avec une palette de couleurs monochromatiques, des éléments interactifs et la prise en charge du mode sombre. Conçu pour une complexité modérée avec des couleurs vives, des formes géométriques et des motifs ludiques.
Volet interactif de livraison de nourriture
Un composant complexe et interactif de livraison de nourriture et de restauration avec des effets de néons, des couleurs vives et de multiples éléments interactifs. Conçu pour la réactivité et la prise en charge du mode sombre.