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.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
<div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
<div class="flex-1">
<h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
<p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
<p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
<img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
<div class="flex justify-between">
<button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
<button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
<button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
</div>
</div>
</div>Composants associés
Composante des composantes interactives
Un composant interactif avec un design Glassmorphism, une palette de couleurs pastel et une mise en page simple pour le contenu du blog. Il est réactif et inclut la prise en charge du mode sombre.
Composante des composantes interactives
Composant de composants interactifs avec conception matérielle, schéma de couleurs triadique, complexité complexe, pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.