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
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour la consommation de blog ou de contenu avec un style de conception 3D et la prise en charge du thème sombre.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.
Carte d’annonce immobilière - Pastel suisse
Une carte d’annonce immobilière simple, propre et réactive avec un style typographique suisse/international et une palette de couleurs pastel, adaptée aux plateformes immobilières. Inclut la prise en charge du mode sombre.