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
Un composant simple de médias sociaux conçu avec le Skeuomorphisme et une palette de couleurs monochromatiques pour le contenu du blog. Il dispose d’une mise en page réactive et d’un support de thème sombre utilisant Tailwind CSS.
Composantes sociales
Un composant Web présentant un design glassmorphism avec des éléments translucides et des effets de flou semblables à du verre dépoli, des effets réactifs et la prise en charge du thème sombre.
Volet Composantes sociales
Une composante sociale pour un tableau de bord au design brutaliste et pastel. Il affiche un profil utilisateur avec un nom, un titre et un avatar, et comprend des boutons pour les actions sociales telles que le suivi, la messagerie et le partage. Le composant est réactif et prend en charge le mode sombre.