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.
HTML Code
<div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden md:max-w-2xl m-5">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/300" alt="Social image">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Social Update</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Engaging Title Here</a>
<p class="mt-2 text-gray-500 dark:text-gray-400">This is a short description of the social update. It's designed to be concise and engaging for blog readers.</p>
<div class="mt-4 flex items-center">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-500">Posted on Oct 26, 2023</p>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
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é.
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.