Volet Composantes sociales
Composants sociaux Composant avec un design brutal, des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-900 text-black dark:text-white border-4 border-black dark:border-white p-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold font-mono">Social Feed</h2>
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 border-2 border-black dark:border-white font-mono">Follow</button>
</div>
<div class="space-y-6">
<div class="border-2 border-black dark:border-white p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="ml-4">
<p class="font-bold font-mono">John Doe</p>
<p class="text-sm font-mono">@johndoe</p>
</div>
</div>
<p class="mb-4 font-mono">This is an example social media post. Exciting content and brutalist design!</p>
<img src="https://picsum.photos/600/400" alt="Post Image" class="w-full h-48 object-cover border-2 border-black dark:border-white">
<div class="flex justify-between mt-4 font-mono">
<span>Likes: 100</span>
<span>Comments: 20</span>
</div>
</div>
<div class="border-2 border-black dark:border-white p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-white">
<div class="ml-4">
<p class="font-bold font-mono">Jane Smith</p>
<p class="text-sm font-mono">@janesmith</p>
</div>
</div>
<p class="mb-4 font-mono">Another brutalist-inspired post. Raw and captivating!</p>
<div class="flex justify-between mt-4 font-mono">
<span>Likes: 50</span>
<span>Comments: 15</span>
</div>
</div>
</div>
</div>Composants associés
Volet Composantes sociales
Une section de composants sociaux simple et réactive pour un tableau de bord, avec une palette de couleurs monochromatique et un design inspiré du Skeuomorphisme.
Volet Composantes sociales
Un composant social brutaliste présentant un design audacieux avec un contraste élevé, des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS. Comprend des avatars d’utilisateurs, des liens vers les réseaux sociaux et des images de remplacement.
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.