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
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.
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.
Volet Composantes sociales
Un composant de flux social pour les mises à jour météorologiques, avec des dégradés de couleurs, des couleurs triadiques et des éléments interactifs. Réactif avec prise en charge du mode sombre.