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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
</div>
</div>
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
</div>
</div>Composants associés
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des micro-interactions, des couleurs en niveaux de gris et une complexité modérée, conçu pour les portefeuilles avec prise en charge réactive des thèmes sombres.
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour les médias sociaux conçu dans un style skeuomorphe avec des couleurs pastel, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composants d’affichage de contenu Composant 11
Un composant d’affichage de contenu de style rétro/vintage présentant des designs nostalgiques des années 80/90, avec des effets réactifs et une prise en charge du thème sombre.