Composantes sociales
Une section de composants sociaux conçue dans un style skeuomorphique, avec des effets réactifs et un support de thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto flex flex-col items-center">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Connect with Us</h2>
<div class="flex flex-row space-x-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=1" alt="Facebook" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Facebook.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=2" alt="Twitter" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Twitter.</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/100/100?random=3" alt="Instagram" class="rounded-full mb-2">
<h3 class="font-bold text-gray-700 dark:text-gray-200">Instagram</h3>
<p class="text-gray-600 dark:text-gray-400">Follow us on Instagram.</p>
</div>
</div>
<div class="mt-6 flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-16 h-16 mb-2">
<h4 class="font-semibold text-gray-800 dark:text-white">John Doe</h4>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>Composants associés
Volet Composantes sociales
Un composant de médias sociaux réactif conçu avec le style Neumorphism et la prise en charge du thème sombre, avec une mise en page simple et des éléments minimaux.
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
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.