Volet Composantes sociales
Un composant de médias sociaux de style rétro/vintage doté d’une interface riche avec de multiples éléments interactifs, conçu avec des couleurs complémentaires et prenant en charge le mode sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4">
<div class="flex mb-4">
<img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
<img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
<div class="flex justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
</div>
</div>
<div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
<span class="cursor-pointer hover:underline">12 Likes</span>
<span class="cursor-pointer hover:underline">3 Comments</span>
</div>
</div>Composants associés
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 social axé sur les micro-interactions pour les blogs avec des animations attrayantes et une palette de couleurs monochromatiques.
Composantes sociales
Un composant Web présentant un design glassmorphism avec des éléments translucides et des effets de flou semblables à du verre dépoli, des effets réactifs et la prise en charge du thème sombre.