Volet Composantes sociales
Une composante sociale brutaliste, complexe et axée sur le commerce électronique avec une palette de couleurs analogue, mise en œuvre avec Tailwind CSS. Il est réactif et prend en charge le mode sombre.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
<!-- Social Components Component -->
<div class="max-w-4xl w-full bg-red-400 dark:bg-red-800 border-4 border-black dark:border-white shadow-[8px_8px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_rgba(255,255,255,1)] p-8 space-y-8">
<!-- Header Section -->
<div class="flex flex-col sm:flex-row justify-between items-center border-b-4 border-black dark:border-white pb-4">
<h1 class="text-5xl font-extrabold text-black dark:text-white uppercase tracking-tighter mb-4 sm:mb-0">Social Feed</h1>
<div class="flex space-x-4">
<button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">New Post</button>
<button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-6 py-3 border-4 border-black dark:border-white text-xl font-bold uppercase shadow-[4px_4px_0px_rgba(0,0,0,1)] dark:shadow-[4px_4px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Profile</button>
</div>
</div>
<!-- Main Content Area - Grid Layout for Posts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Social Post Card 1 -->
<div class="bg-green-400 dark:bg-green-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
<div class="ml-4">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase">Jane Doe</h2>
<p class="text-black dark:text-white text-sm">2 hours ago</p>
</div>
</div>
<img src="https://picsum.photos/id/237/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Absolutely loving this new collection! The colors are so vibrant and the quality is superb. Perfect for my e-commerce store."</p>
<div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
<div class="flex space-x-4">
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 124 Likes</button>
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 36 Comments</button>
</div>
<button class="bg-purple-400 dark:bg-purple-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-purple-500 dark:hover:bg-purple-700 transition duration-300">Share</button>
</div>
</div>
<!-- Social Post Card 2 -->
<div class="bg-yellow-400 dark:bg-yellow-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
<div class="ml-4">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase">John Smith</h2>
<p class="text-black dark:text-white text-sm">5 hours ago</p>
</div>
</div>
<img src="https://picsum.photos/id/1018/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Just received my order and I'm blown away! The design is so unique and the product feels incredibly durable. Highly recommend for any e-commerce business."</p>
<div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
<div class="flex space-x-4">
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 289 Likes</button>
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 78 Comments</button>
</div>
<button class="bg-blue-400 dark:bg-blue-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-blue-500 dark:hover:bg-blue-700 transition duration-300">Share</button>
</div>
</div>
<!-- Social Post Card 3 -->
<div class="bg-blue-400 dark:bg-blue-700 border-4 border-black dark:border-white p-6 shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/21.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
<div class="ml-4">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase">Emily White</h2>
<p class="text-black dark:text-white text-sm">1 day ago</p>
</div>
</div>
<img src="https://picsum.photos/id/1025/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Selling like hotcakes! My customers can't get enough of these amazing products. The brutalist design elements really make my e-commerce site stand out."</p>
<div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
<div class="flex space-x-4">
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 512 Likes</button>
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 112 Comments</button>
</div>
<button class="bg-green-400 dark:bg-green-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-green-500 dark:hover:bg-green-700 transition duration-300">Share</button>
</div>
</div>
<!-- Social Post Card 4 -->
<div class="bg-purple-400 dark:bg-purple-700 border-4 border-black dark:border-white p-6 shadow-[6px_6_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)]">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-black dark:border-white object-cover">
<div class="ml-4">
<h2 class="text-2xl font-bold text-black dark:text-white uppercase">David Lee</h2>
<p class="text-black dark:text-white text-sm">3 days ago</p>
</div>
</div>
<img src="https://picsum.photos/id/1040/600/400" alt="Post Image" class="w-full h-64 object-cover border-4 border-black dark:border-white mb-4">
<p class="text-black dark:text-white text-lg leading-relaxed mb-4">"Fantastic addition to my product lineup. The aesthetic is so unique and powerful, perfect for attracting attention on my e-commerce platform."</p>
<div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
<div class="flex space-x-4">
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">❤ 345 Likes</button>
<button class="text-black dark:text-white text-xl font-bold hover:text-gray-700 dark:hover:text-gray-300">💬 98 Comments</button>
</div>
<button class="bg-red-400 dark:bg-red-600 text-black dark:text-white px-4 py-2 border-4 border-black dark:border-white text-md font-bold uppercase shadow-[3px_3px_0px_rgba(0,0,0,1)] dark:shadow-[3px_3px_0px_rgba(255,255,255,1)] hover:bg-red-500 dark:hover:bg-red-700 transition duration-300">Share</button>
</div>
</div>
</div>
<!-- Call to Action / Footer Section -->
<div class="flex flex-col sm:flex-row justify-between items-center border-t-4 border-black dark:border-white pt-8">
<p class="text-2xl text-black dark:text-white font-bold mb-4 sm:mb-0">Explore more products on our store!</p>
<button class="bg-yellow-400 dark:bg-yellow-600 text-black dark:text-white px-8 py-4 border-4 border-black dark:border-white text-2xl font-bold uppercase shadow-[6px_6px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_rgba(255,255,255,1)] hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">Shop Now</button>
</div>
</div>
</div>
Composants associés
Social_Components_Component
Un composant social de commerce électronique réactif et interactif avec une esthétique de conception 3D, une palette de couleurs complémentaires et une prise en charge du mode sombre. Comprend des avis/témoignages d’utilisateurs, des notes par étoiles et un appel à l’action « partager ».
Volet Composantes sociales
Composant du portefeuille conçu en mode sombre avec une palette de couleurs monochromatiques. Il présente des travaux ou des produits avec une mise en page simple.
Volet Composantes sociales
Un composant de médias sociaux réactif avec prise en charge du mode sombre pour les sites Web d’entreprise, avec une palette de couleurs triadique.