Composants Composantes sociales Volet Composantes sociales

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.

Aperçu

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

Carte d’auteur 3D Social

Un composant de carte d’auteur réactif avec des effets 3D et des liens vers les réseaux sociaux, conçu pour les sections de blog/contenu. Il dispose d’un schéma de couleurs complémentaires (bleu pour l’identité/les infos, orange pour les accents/CTA), prend en charge le mode sombre et utilise Tailwind CSS pour le style. Le design est d’une complexité « simple » avec une mise en page de base et des éléments minimaux, mais le « design 3D » est incorporé pour la profondeur et l’engagement en utilisant des ombres et des effets de survol. Le composant comprend un avatar, le nom de l’auteur, une courte biographie, des icônes de médias sociaux et un bouton d’appel à l’action « Suivez-moi ». Il utilise un avatar randomuser.me comme espace réservé.

Ouvrir