Composantes sociales
Un composant social skeuomorphe conçu à des fins de blogs/contenu avec des couleurs vives et la prise en charge du mode sombre.
HTML Code
<div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-6">Recent Posts</h1>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Posted a new article about technology trends in 2023.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">2 hours ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400">Exploring the wonders of the universe and beyond.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">4 hours ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-6 mb-4 shadow-md flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-14 h-14 rounded-full shadow-lg">
<div class="flex-1">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Mark Lee</h2>
<p class="text-gray-600 dark:text-gray-400">Designing modern interfaces with UX principles.</p>
<span class="text-sm text-blue-500 dark:text-blue-300">1 day ago</span>
</div>
<a href="#" class="text-white bg-blue-600 dark:bg-blue-700 hover:bg-blue-500 dark:hover:bg-blue-600 px-4 py-2 rounded-lg">Read More</a>
</div>
<div class="text-right">
<a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">See all posts →</a>
</div>
</div>Composants associés
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.
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.
Volet Composantes sociales
Un composant de médias sociaux réactif conçu avec une esthétique rétro/vintage, doté d’une interface riche avec de multiples éléments interactifs et un thème sombre.