Social Media Skeumorphic Container
A skeuomorphic social media container designed with a monochromatic scheme, featuring soft shadows, subtle gradients, and rounded edges to mimic real-world elements like buttons and cards, suitable for displaying user posts or profiles. Includes full responsiveness and dark mode support.
HTML Code
<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>Related Components
3D Grayscale Business Container
3D Grayscale Container Component for Business/Corporate Websites
Container Component 21
A responsive retro/vintage styled container component with dark theme support.