Componente Componenti sociali
Una scheda di social media semplice e reattiva con elementi di design 3D, toni della terra e supporto per la modalità scura.
Codice HTML
<div class="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center">
<div class="relative w-full max-w-sm rounded-lg shadow-xl bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-700 dark:to-stone-900 overflow-hidden transform transition-all duration-300 hover:scale-105">
<!-- Subtle 3D effect layers -->
<div class="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent dark:from-black/20 dark:to-transparent opacity-50"></div>
<div class="absolute inset-0 border-t border-l border-white/30 dark:border-black/30 transform skew-y-2 translate-x-2 translate-y-2 opacity-20"></div>
<div class="relative p-6">
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full ring-2 ring-stone-400 dark:ring-stone-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</p>
<p class="text-sm text-stone-600 dark:text-stone-400">@johndoe</p>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 mb-4">
Exploring the beauty of nature. Every moment is an adventure! #nature #travel #earthtones
</p>
<img class="w-full h-48 object-cover rounded-md mb-4 shadow-md transform translate-y-1 tranlsate-x-1" src="https://picsum.photos/600/400?random=1" alt="Post Image">
<div class="flex justify-between items-center text-stone-600 dark:text-stone-400 text-sm">
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
<span>1.2K Likes</span>
</div>
<div class="flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 13.5V0H2v13.5A2.5 2.5 0 004.5 16h11A2.5 2.5 0 0018 13.5zM12 4H8v4h4V4z" clip-rule="evenodd" />
<path d="M5 16h10c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5H5c-.828 0-1.5-.672-1.5-1.5S4.172 16 5 16z" />
</svg>
<span>245 Comments</span>
</div>
</div>
</div>
</div>
</div>
Componenti correlati
Componente Componenti sociali
Un componente per social media in stile retrò/vintage caratterizzato da una ricca interfaccia con più elementi interattivi, progettato con colori complementari e che supporta la modalità oscura.
Componente Componenti sociali
Componente Social Components con design Brutalism, effetti reattivi e supporto per temi scuri.
Componente Componenti sociali
Un semplice componente per social media che utilizza Tailwind CSS e progettato con i principi del Material Design. È dotato di colori vivaci e supporto per la modalità oscura, che lo rendono adatto alle interfacce di social networking.