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.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">John Doe</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Jane Smith</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Alice Johnson</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
<img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
<p class="text-lg font-semibold">Bob Brown</p>
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
</div>
</div>
<div class="mt-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
<div class="flex space-x-4 mt-2">
<a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
<a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
<a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
<a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
</div>
</div>
</div>
Composants associés
Volet Composantes sociales
Un composant social simple et élégant conçu pour les plateformes musicales et audio avec une palette de couleurs à contraste élevé et un style luxueux, avec le profil de l’utilisateur, les abonnés et les mesures d’engagement. Entièrement réactif avec prise en charge du mode sombre.
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
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.