Cartolina retrò per i social media
Un componente di cartolina reattiva per i social media con un'estetica retrò/vintage anni '80/'90, utilizzando una combinazione di colori analoga (Sky, Teal, Purple) con accenti fucsia. Dispone di supporto per la modalità oscura ed effetti di passaggio del mouse interattivi. I contenuti includono avatar dell'utente, nome utente, timestamp, post di testo, immagini e pulsanti di azione (mi piace, commento, condivisione). Costruito con Tailwind CSS.
Codice HTML
<div class="min-h-screen bg-stone-200 dark:bg-slate-900 py-8 flex items-center justify-center">
<div class="max-w-xl w-full mx-auto p-1 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-cyan-500 rounded-xl shadow-2xl">
<div class="bg-stone-100 dark:bg-slate-800 rounded-lg p-6">
<!-- Header -->
<div class="flex items-center space-x-4 mb-6 pb-4 border-b-2 border-dashed border-sky-300 dark:border-sky-700">
<img class="w-16 h-16 rounded-full border-4 border-fuchsia-500 dark:border-fuchsia-400 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-xl font-bold text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">RetroGal92</p>
<p class="text-sm text-slate-500 dark:text-slate-400">Posted 2 hours ago</p>
</div>
<div class="ml-auto">
<svg class="w-6 h-6 text-slate-500 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-300 cursor-pointer transition-colors duration-150" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
</div>
</div>
<!-- Content -->
<div class="mb-6">
<p class="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
Just vibin' with these retro tunes! <span class="text-2xl">🎧</span> Anyone else remember mixtapes and oversized headphones? Good times! <span class="text-yellow-400">✨</span>
<a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#RetroLife</a>
<a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#90sKid</a>
</p>
<img class="w-full h-auto rounded-lg shadow-lg border-2 border-teal-500 dark:border-teal-400 object-cover" src="https://picsum.photos/seed/retroscene1/600/400" alt="Retro Scene">
</div>
<!-- Actions -->
<div class="flex items-center justify-between text-slate-600 dark:text-slate-300">
<button class="flex items-center space-x-2 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors duration-200 group">
<svg class="w-6 h-6 group-hover:fill-current transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span class="font-medium group-hover:font-bold text-sm sm:text-base">1.2k Likes</span>
</button>
<button class="flex items-center space-x-2 hover:text-sky-600 dark:hover:text-sky-400 transition-colors duration-200 group">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
<span class="font-medium group-hover:font-bold text-sm sm:text-base">87 Comments</span>
</button>
<button class="flex items-center space-x-2 hover:text-teal-600 dark:hover:text-teal-400 transition-colors duration-200 group">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4m0 0l-4 4m4-4v12"></path></svg>
<span class="font-medium group-hover:font-bold text-sm sm:text-base">Share</span>
</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo che incorpora microinterazioni con animazioni coinvolgenti incentrate sulle azioni dell'utente. Include il supporto per la modalità oscura e segnaposto per immagini e avatar.
Componente Visualizzazione contenuto
Un componente in stile glassmorphism per la visualizzazione di contenuti di portfolio con elementi interattivi, che supporta la modalità scura.
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo caratterizzato da uno stile di design minimalista e piatto, ideale per blog e consumo di contenuti. Ha una combinazione di colori in scala di grigi ed è dotato di elementi interattivi mentre supporta la modalità oscura.