Composant d’affichage du contenu
Un composant d’affichage de contenu avec une conception glassmorphism avec une mise en page réactive et une prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>
</div>
</div>Composants associés
Composants d’affichage du contenu
Un composant simple d’affichage de contenu réactif de style vintage pour le commerce électronique, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre.
SimpleContentDisplay
Un composant d’affichage de contenu simple avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.