Composant Composants d’affichage de contenu
Un composant d’affichage de contenu simple et réactif avec un effet de glassmorphism, une prise en charge du thème sombre et une palette de couleurs complémentaire, adaptée aux blogs ou à la consommation de contenu.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 flex items-center justify-center p-4">
<div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 rounded-xl p-6 shadow-xl border border-gray-200 dark:border-gray-700 max-w-2xl w-full">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Content Card</h1>
<div class="mb-4">
<img src="https://picsum.photos/600/300" alt="Blog Post Image" class="rounded-lg shadow-md mb-4">
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Lorem Ipsum Dolor Sit Amet</h2>
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
<div class="flex items-center justify-between border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-500 dark:border-pink-500">
<div>
<p class="font-semibold text-gray-700 dark:text-white">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">August 15, 2023</p>
</div>
</div>
<a href="#" class="text-purple-600 dark:text-pink-400 hover:underline font-medium">Read More →</a>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant de style glassmorphism pour l’affichage du contenu du portefeuille avec des éléments interactifs, prenant en charge le mode sombre.
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif de style Glassmorphism, avec un arrière-plan flou et des éléments translucides avec prise en charge du mode sombre.
Composant d’affichage du contenu
Un composant d’affichage de contenu conçu dans un style skeuomorphe pour le commerce électronique avec un thème sombre. Il présente des produits avec un minimum d’éléments, en utilisant une palette de couleurs analogue pour une esthétique agréable.