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
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 Composants d’affichage de contenu
Un composant d’affichage de contenu réactif avec prise en charge du mode sombre pour les sites Web d’entreprise.
Carte postale rétro pour les médias sociaux
Un composant de carte postale réactif pour les réseaux sociaux avec une esthétique rétro/vintage des années 80/90, utilisant une palette de couleurs analogue (ciel, sarcelle, violet) avec des accents fuchsia. Dispose d’une prise en charge du mode sombre et d’effets de survol interactifs. Le contenu comprend l’avatar de l’utilisateur, le nom d’utilisateur, l’horodatage, la publication de texte, l’image et les boutons d’action (like, comment, share). Construit avec Tailwind CSS.