Componente Componenti sociali
Una scheda social media semplice e reattiva per contenuti di notizie/giornalismo con un'estetica industriale e una combinazione di colori autunnali, incluso il supporto della modalità scura.
Codice HTML
<div class="bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8 font-sans antialiased text-stone-800 dark:text-stone-200">
<div class="max-w-xs mx-auto border-2 border-stone-400 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-50 dark:bg-stone-800 transition-colors duration-300">
<div class="relative">
<img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/250?random=1" alt="News Article Cover">
<span class="absolute top-2 left-2 bg-amber-700 text-amber-50 text-xs px-2 py-1 rounded font-mono uppercase tracking-wide">News</span>
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-amber-800 dark:text-amber-500 mb-2 leading-tight">Headline Connects Community Leaders</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-3">
Local officials and community organizers gathered today to discuss new initiatives aimed at fostering stronger neighborhood bonds and addressing pressing local issues.
</p>
<div class="flex items-center justify-between text-stone-500 dark:text-stone-400 text-xs">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
<span class="font-medium">John Doe</span>
</div>
<span>Oct 26, 2023</span>
</div>
</div>
</div>
</div>Componenti correlati
Glassmorphism Social Card
Un componente di social card glassmorphism semplice e reattivo con colori pastello e supporto per la modalità scura, adatto per le interfacce del cruscotto.
Scheda Autore Social 3D
Un componente reattivo della scheda autore con effetti 3D e collegamenti ai social media, progettato per le sezioni di blog/contenuti. Presenta una combinazione di colori complementari (blu per identità/informazioni, arancione per accenti/CTA), supporta la modalità oscura e utilizza Tailwind CSS per lo stile. Il design è di complessità "semplice" con un layout di base ed elementi minimi, ma il "design 3D" è incorporato per la profondità e il coinvolgimento utilizzando ombre ed effetti di passaggio del mouse. Il componente include un avatar, il nome dell'autore, una breve biografia, icone dei social media e un pulsante di invito all'azione "Seguimi". Utilizza un avatar randomuser.me come segnaposto.
Componente Componenti sociali
Un componente del portfolio progettato in modalità oscura con una combinazione di colori monocromatica. Mette in mostra lavori o prodotti con un layout semplice.