Contenedor esqueumórfico para redes sociales
Un contenedor de redes sociales esqueuomórfico diseñado con un esquema monocromático, con sombras suaves, degradados sutiles y bordes redondeados para imitar elementos del mundo real como botones y tarjetas, adecuados para mostrar publicaciones o perfiles de usuarios. Incluye capacidad de respuesta completa y soporte para modo oscuro.
Código HTML
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-950 flex items-center justify-center font-sans">
<div class="w-full max-w-2xl bg-gray-50 dark:bg-gray-800 rounded-3xl p-6 sm:p-8 md:p-10 shadow-2xl overflow-hidden
dark:shadow-[0_10px_20px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
shadow-[0_10px_20px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
border border-gray-100 dark:border-gray-700">
<!-- Header Section (Skeuomorphic Button/Toggle) -->
<div class="flex items-center justify-between mb-8">
<div class="flex items-center space-x-3">
<button class="relative p-2 rounded-xl bg-gray-200 dark:bg-gray-700
shadow-[0_3px_6px_rgba(0,0,0,0.15),_0_1px_2px_rgba(0,0,0,0.05)_inset]
dark:shadow-[0_3px_6px_rgba(0,0,0,0.7),_0_1px_2px_rgba(255,255,255,0.05)_inset]
hover:shadow-[0_1px_2px_rgba(0,0,0,0.1)_inset,_0_0_0_1px_rgba(0,0,0,0.05)_inset]
dark:hover:shadow-[0_1px_2px_rgba(255,255,255,0.1)_inset,_0_0_0_1px_rgba(255,255,255,0.05)_inset]
transition-all duration-200 ease-in-out
text-gray-700 dark:text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Feed</h2>
</div>
<div class="relative w-20 h-10 rounded-full cursor-pointer
bg-gray-300 dark:bg-gray-600
shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_0_0_1px_rgba(0,0,0,0.05)]
dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.7),_inset_0_0_0_1px_rgba(255,255,255,0.05)]
flex items-center p-1 transition-colors duration-300 ease-in-out">
<!-- Toggle switch for dark mode (visual only, requires JS for functionality) -->
<div class="absolute left-1 h-8 w-8 rounded-full bg-white dark:bg-gray-800 shadow-md
dark:translate-x-10 transform transition-transform duration-300 ease-in-out
dark:shadow-[0_2px_6px_rgba(0,0,0,0.7)]
shadow-[0_2px_6px_rgba(0,0,0,0.1)]"></div>
<span class="absolute top-1/2 -translate-y-1/2 left-3 text-sm text-gray-600 dark:text-gray-400 opacity-0 dark:opacity-100 transition-opacity duration-300 ease-in-out">🌜</span>
<span class="absolute top-1/2 -translate-y-1/2 right-3 text-sm text-gray-600 dark:text-gray-400 opacity-100 dark:opacity-0 transition-opacity duration-300 ease-in-out">☀️</span>
</div>
</div>
<!-- Social Post Card (Mimicking a physical card) -->
<div class="relative mb-8 p-6 rounded-2xl bg-gray-100 dark:bg-gray-750
shadow-[0_5px_10px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
dark:shadow-[0_5px_10px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm mr-4"
src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed">Exploring the wonders of Skeuomorphism in web design! It's fascinating how digital elements can mimic real-world counterparts. #Skeuomorphism #WebDesign</p>
<img class="w-full h-48 object-cover rounded-xl mb-4
shadow-[0_2px_4px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
dark:shadow-[0_2px_4px_rgba(0,0,0,0.5),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
border border-gray-300 dark:border-gray-600" src="https://picsum.photos/600/400?random=1" alt="Post Image">
<div class="flex justify-around items-center pt-4 border-t border-gray-200 dark:border-gray-700">
<button class="flex items-center space-x-2 p-2 rounded-xl group
text-gray-600 dark:text-gray-300
hover:text-blue-500 dark:hover:text-blue-400
active:scale-95 transition-transform duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
group-hover:drop-shadow-[0_0_5px_rgba(60,110,255,0.5)]
group-active:drop-shadow-[0_0_2px_rgba(60,110,255,0.5)]
" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="hidden sm:inline">Liked</span>
</button>
<button class="flex items-center space-x-2 p-2 rounded-xl group
text-gray-600 dark:text-gray-300
hover:text-green-500 dark:hover:text-green-400
active:scale-95 transition-transform duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
group-hover:drop-shadow-[0_0_5px_rgba(0,180,0,0.5)]
group-active:drop-shadow-[0_0_2px_rgba(0,180,0,0.5)]
" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="hidden sm:inline">Comment</span>
</button>
<button class="flex items-center space-x-2 p-2 rounded-xl group
text-gray-600 dark:text-gray-300
hover:text-purple-500 dark:hover:text-purple-400
active:scale-95 transition-transform duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
group-hover:drop-shadow-[0_0_5px_rgba(128,0,128,0.5)]
group-active:drop-shadow-[0_0_2px_rgba(128,0,128,0.5)]
" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.111 9 12.836 9 12.5c0-.336-.118-.611-.316-.842M12 2L12 6M12 18L12 22M15 9l-3-3M9 9l-3-3M6.5 13.5l-2 2M17.5 13.5l2 2M4 12H2M22 12h-2m-13.5-3l-2-2m-2-2L15 9m-2 2h-2m-2-2L9 9m-2 2h-2"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h.01M10 10h.01M14 10h.01M18 10h.01M2 14h.01M6 14h.01M10 14h.01M14 14h.01M18 14h.01M22 14h.01"></path>
</svg>
<span class="hidden sm:inline">Share</span>
</button>
</div>
</div>
<!-- Another Post Card (Slightly different content) -->
<div class="relative p-6 rounded-2xl bg-gray-100 dark:bg-gray-750
shadow-[0_5px_10px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
dark:shadow-[0_5px_10px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
border border-gray-200 dark:border-gray-700">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-sm mr-4"
src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
<div>
<p class="font-semibold text-gray-800 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed">Loving the monochromatic aesthetic! It creates such a sophisticated and cohesive look. Perfect for social feeds. ✨</p>
<img class="w-full h-48 object-cover rounded-xl mb-4
shadow-[0_2px_4px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
dark:shadow-[0_2px_4px_rgba(0,0,0,0.5),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
border border-gray-300 dark:border-gray-600" src="https://picsum.photos/600/400?random=2" alt="Post Image">
<div class="flex justify-around items-center pt-4 border-t border-gray-200 dark:border-gray-700">
<button class="flex items-center space-x-2 p-2 rounded-xl group
text-gray-600 dark:text-gray-300
hover:text-blue-500 dark:hover:text-blue-400
active:scale-95 transition-transform duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
group-hover:drop-shadow-[0_0_5px_rgba(60,110,255,0.5)]
group-active:drop-shadow-[0_0_2px_rgba(60,110,255,0.5)]
" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="hidden sm:inline">Liked</span>
</button>
<button class="flex items-center space-x-2 p-2 rounded-xl group
text-gray-600 dark:text-gray-300
hover:text-green-500 dark:hover:text-green-400
active:scale-95 transition-transform duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
group-hover:drop-shadow-[0_0_5px_rgba(0,180,0,0.5)]
group-active:drop-shadow-[0_0_2px_rgba(0,180,0,0.5)]
" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
<span class="hidden sm:inline">Comment</span>
</button>
<button class="flex items-center space-x-2 p-2 rounded-xl group
text-gray-600 dark:text-gray-300
hover:text-purple-500 dark:hover:text-purple-400
active:scale-95 transition-transform duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6
group-hover:drop-shadow-[0_0_5px_rgba(128,0,128,0.5)]
group-active:drop-shadow-[0_0_2px_rgba(128,0,128,0.5)]
" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.111 9 12.836 9 12.5c0-.336-.118-.611-.316-.842M12 2L12 6M12 18L12 22M15 9l-3-3M9 9l-3-3M6.5 13.5l-2 2M17.5 13.5l2 2M4 12H2M22 12h-2m-13.5-3l-2-2m-2-2L15 9m-2 2h-2m-2-2L9 9m-2 2h-2"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h.01M10 10h.01M14 10h.01M18 10h.01M2 14h.01M6 14h.01M10 14h.01M14 14h.01M18 14h.01M22 14h.01"></path>
</svg>
<span class="hidden sm:inline">Share</span>
</button>
</div>
</div>
<!-- Input/Action Bar (Mimicking a physical bar) -->
<div class="mt-8 flex items-center p-4 rounded-xl
bg-gray-100 dark:bg-gray-750
shadow-[0_2px_5px_rgba(0,0,0,0.08),_0_0_0_1px_rgba(0,0,0,0.03)_inset]
dark:shadow-[0_2px_5px_rgba(0,0,0,0.6),_0_0_0_1px_rgba(255,255,255,0.03)_inset]
border border-gray-200 dark:border-gray-700">
<input type="text" placeholder="What's on your mind?" class="flex-grow mr-4 py-2 px-4 rounded-lg
bg-gray-200 dark:bg-gray-700
border border-gray-300 dark:border-gray-600
text-gray-800 dark:text-gray-100
shadow-[inset_0_1px_3px_rgba(0,0,0,0.1),_0_0_0_1px_rgba(0,0,0,0.02)]
dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.7),_0_0_0_1px_rgba(255,255,255,0.02)]
focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500
placeholder-gray-500 dark:placeholder-gray-400">
<button class="p-3 rounded-xl
bg-blue-500 dark:bg-blue-600
text-white
shadow-[0_2px_5px_rgba(0,0,0,0.2),_0_0_0_1px_rgba(0,0,0,0.05)_inset]
dark:shadow-[0_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.05)_inset]
hover:bg-blue-600 dark:hover:bg-blue-700
active:shadow-[inset_0_1px_3px_rgba(0,0,0,0.3)]
dark:active:shadow-[inset_0_1px_3px_rgba(255,255,255,0.3)]
active:scale-95 transition-all duration-100 ease-in-out">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A12.913 12.913 0 0112 10.5c2.479 0 4.802.735 6.702 2.012l.18.114a1 1 0 001.275-1.55l-1.077-.735a14.852 14.852 0 00-6.19-2.028 10 10 0 00-4.048 0 14.852 14.852 0 00-6.19 2.028l-1.077.735a1 1 0 001.275 1.55l.18-.114zM12 21a9 9 0 110-18 9 9 0 010 18z" />
</svg>
</button>
</div>
</div>
</div>Componentes relacionados
Skeuomorphic_E-commerce_Container
Componente contenedor de comercio electrónico Skeuomórfico en tonos pastel con soporte para modo oscuro
Componente de contenedor 3D
Un componente contenedor receptivo para tableros con una combinación de colores vibrantes y elementos de diseño 3D, compatible con el modo oscuro.
Ficha de producto de comercio electrónico neumórfico
Una tarjeta de producto de comercio electrónico simple y receptiva con un estilo de diseño neumórfico en escala de grises, con soporte para modo oscuro.