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
Il s’agit d’un composant social complexe et dynamique pour les pages de blog/contenu, axé sur les micro-interactions avec les boutons de partage, les likes, les commentaires et l’enregistrement. Comprend une réactivité complète et la prise en charge du mode sombre.
Volet Composantes sociales
Composant social Composant avec un design skeuomorphe, une palette de couleurs complémentaire et une complexité modérée. Il est conçu pour les sites Web d’entreprise, est réactif et prend en charge les thèmes sombres.
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.