Volet Composantes sociales
Une section complexe de composants sociaux conçue pour les sites Web d’entreprise, utilisant les principes de conception matérielle et une palette de couleurs en niveaux de gris. Il présente un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="max-w-6xl mx-auto p-5">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Connect with Us</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=1" class="w-full h-32 object-cover rounded-lg" alt="Social Image 1">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Twitter</h3>
<p class="text-gray-600 dark:text-gray-400">Stay updated with our latest tweets and news.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Twitter</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=2" class="w-full h-32 object-cover rounded-lg" alt="Social Image 2">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Join Us on LinkedIn</h3>
<p class="text-gray-600 dark:text-gray-400">Connect with us professionally and grow your network.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit LinkedIn</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=3" class="w-full h-32 object-cover rounded-lg" alt="Social Image 3">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Like Us on Facebook</h3>
<p class="text-gray-600 dark:text-gray-400">Join our community and stay updated with our activities.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Facebook</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=4" class="w-full h-32 object-cover rounded-lg" alt="Social Image 4">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Subscribe to Our YouTube</h3>
<p class="text-gray-600 dark:text-gray-400">Watch our latest videos and tutorials.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit YouTube</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=5" class="w-full h-32 object-cover rounded-lg" alt="Social Image 5">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Us on Instagram</h3>
<p class="text-gray-600 dark:text-gray-400">Catch a glimpse of our behind-the-scenes.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit Instagram</a>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition-shadow duration-300 ease-in-out transform hover:shadow-lg">
<img src="https://picsum.photos/400/200?random=6" class="w-full h-32 object-cover rounded-lg" alt="Social Image 6">
<div class="mt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Connect on GitHub</h3>
<p class="text-gray-600 dark:text-gray-400">Explore our projects and collaborations.</p>
<a href="#" class="mt-2 inline-block text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">Visit GitHub</a>
</div>
</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.
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.
Volet Composantes sociales
Un composant simple de médias sociaux utilisant Tailwind CSS et conçu selon les principes du Material Design. Il présente des couleurs vives et une prise en charge du mode sombre, ce qui le rend adapté aux interfaces de réseaux sociaux.