Composant d’affichage du contenu
Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="max-w-xs mx-auto bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:border-gray-700">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200?random=1" alt="Nostalgic Image">
<div class="p-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Avatar">
<div class="ml-3">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Retro Nostalgia</h2>
<p class="text-gray-600 dark:text-gray-400">Explore the vibrant designs of the 80s and 90s that inspired our modern aesthetics.</p>
</div>
</div>
<div class="mt-4">
<h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Join the Movement</h3>
<p class="text-gray-500 dark:text-gray-400">Be part of our journey as we explore retro designs, culture, and style.
</p>
</div>
<div class="flex justify-between mt-4">
<span class="text-gray-600 dark:text-gray-400">#Retro #Vintage</span>
<button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Learn More</button>
</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 d’affichage du contenu
Un composant d’affichage de contenu réactif avec un style de design minimaliste et plat, idéal pour les blogs et la consommation de contenu. Il a une palette de couleurs en niveaux de gris et est équipé d’éléments interactifs tout en 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.