Componente de diseño de redes sociales
Un componente de diseño de redes sociales responsivo y complejo inspirado en 3D con colores vibrantes y soporte para temas oscuros utilizando Tailwind CSS. Incluye un encabezado con un logotipo y navegación, un área de contenido principal con tarjetas dinámicas para publicaciones y una barra lateral para perfiles de usuario y temas de tendencia. Cada elemento está diseñado para dar una sensación de profundidad e interacción.
Código HTML
<div class="min-h-screen bg-gradient-to-br from-violet-200 via-pink-200 to-indigo-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 p-4 font-sans">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-5 mb-6 flex items-center justify-between transform transition duration-500 hover:scale-105 z-10 relative" style="transform-style: preserve-3d; transition: transform 0.3s ease-out;">
<div class="flex items-center space-x-4">
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl font-bold perspective-1000" style="transform: translateZ(20px);">
<span style="transform: rotateY(20deg) rotateX(10deg);">S</span>
</div>
<h1 class="text-3xl font-extrabold text-gray-800 dark:text-white tracking-tight perspective-1000" style="transform: translateZ(10px);">SocialSphere</h1>
</div>
<nav class="space-x-6">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
Profile
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-purple-600 dark:hover:text-pink-400 text-lg font-semibold relative overflow-hidden group perspective-1000">
Messages
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 dark:bg-pink-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" style="transform-origin: bottom left; transform: translateZ(5px);"></span>
</a>
</nav>
</header>
<!-- Main Content Area -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Main Feed -->
<main class="lg:col-span-2 space-y-6">
<!-- Post Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-1 hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-orange-500 opacity-20 transform -translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-pink-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
<div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Alice Wonderland</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">2 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
Exploring the magical forest today! The colors are absolutely breathtaking. Feeling so inspired by nature's beauty. #NatureLover #MagicForest #Inspiration
</p>
<img src="https://picsum.photos/seed/forest/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
<div class="flex items-center space-x-4">
<button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<span>120 Likes</span>
</button>
<button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
<span>45 Comments</span>
</button>
</div>
<button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
<!-- Post Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 transform transition duration-500 hover:rotate-[-1deg] hover:scale-102 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-green-400 to-blue-500 opacity-20 transform translate-x-full group-hover:translate-x-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-4 border-blue-400 dark:border-green-600 shadow-lg transform transition duration-300 hover:scale-110" style="transform: translateZ(10px);">
<div>
<h3 class="text-xl font-bold text-gray-800 dark:text-white" style="transform: translateZ(8px);">Bob The Builder</h3>
<p class="text-gray-500 dark:text-gray-400 text-sm" style="transform: translateZ(6px);">5 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-200 mb-4 leading-relaxed" style="transform: translateZ(4px);">
Just finished a new project! So proud of the team and the hard work everyone put in. Building dreams, one brick at a time. #Construction #HardWork #TeamEffort
</p>
<img src="https://picsum.photos/seed/building/800/400" alt="Post Image" class="rounded-2xl w-full h-64 object-cover mb-4 shadow-lg transform transition duration-300 hover:shadow-2xl" loading="lazy" style="transform: translateZ(2px);">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
<div class="flex items-center space-x-4">
<button class="flex items-center space-x-2 hover:text-red-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<span>210 Likes</span>
</button>
<button class="flex items-center space-x-2 hover:text-blue-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M21 15v-2h-3v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2H3v2c0 2.21 1.79 4 4 4h10c2.21 0 4-1.79 4-4zM4 11V7c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v4H4zm-1-4c0-2.21 1.79-4 4-4h10c2.21 0 4 1.79 4 4v.5c-.71-.24-1.46-.37-2.25-.37-3.68 0-6.69 2.5-7.5 5.86V20h-1c-2.21 0-4-1.79-4-4V7zM18 10h2c0-1.66-1.34-3-3-3h-2c-1.66 0-3 1.34-3 3v2c0 1.66 1.34 3 3 3h2c1.66 0 3-1.34 3-3V10z"/></svg>
<span>88 Comments</span>
</button>
</div>
<button class="flex items-center space-x-2 hover:text-green-500 transition-colors duration-200 transform hover:scale-110 active:scale-95" style="transform: translateZ(3px);">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.52.48 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L7.05 11.23c-.52-.48-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.23-.09.46-.09.7 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>
<span>Share</span>
</button>
</div>
</div>
</div>
</main>
<!-- Sidebar -->
<aside class="space-y-6">
<!-- User Profile Card -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 text-center transform transition duration-500 hover:scale-105 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-500 opacity-20 transform translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile Picture" class="w-28 h-28 rounded-full mx-auto mb-4 border-4 border-indigo-400 dark:border-purple-600 shadow-lg transform transition duration-300 hover:rotate-3 hover:scale-110" style="transform: translateZ(15px);">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2" style="transform: translateZ(10px);">John Doe</h2>
<p class="text-gray-500 dark:text-gray-400 mb-4" style="transform: translateZ(8px);">@johndoe_official</p>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-6" style="transform: translateZ(6px);">
Passionate digital creator, exploring new horizons and sharing my journey. Love to connect and collaborate!
</p>
<div class="flex justify-around items-center text-gray-600 dark:text-gray-300" style="transform: translateZ(4px);">
<div>
<span class="block text-xl font-bold text-purple-600 dark:text-pink-400">1.2K</span>
<span class="block text-sm">Followers</span>
</div>
<div>
<span class="block text-xl font-bold text-purple-600 dark:text-pink-400">750</span>
<span class="block text-sm">Following</span>
</div>
<div>
<span class="block text-xl font-bold text-purple-600 dark:text-pink-400">500</span>
<span class="block text-sm">Posts</span>
</div>
</div>
<button class="mt-6 bg-gradient-to-br from-purple-500 to-pink-500 text-white font-bold py-3 px-8 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 active:translate-y-0 relative z-20" style="transform: translateZ(12px);">
Edit Profile
</button>
</div>
</div>
<!-- Trending Topics Card -->
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-6 relative overflow-hidden group" style="transform-style: preserve-3d;">
<div class="absolute inset-0 bg-gradient-to-br from-orange-400 to-red-500 opacity-20 transform -translate-y-full group-hover:translate-y-0 transition-transform duration-700 ease-out z-0" style="transform: translateZ(-10px);"></div>
<div class="relative z-10">
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4" style="transform: translateZ(10px);">🔥 Trending Topics</h3>
<ul class="space-y-3">
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#AIRevolution</span>
<span class="text-sm text-gray-500 dark:text-gray-400">150K Posts</span>
</li>
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#FutureTech</span>
<span class="text-sm text-gray-500 dark:text-gray-400">90K Posts</span>
</li>
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#CreativeMinds</span>
<span class="text-sm text-gray-500 dark:text-gray-400">70K Posts</span>
</li>
<li class="flex justify-between items-center bg-gray-100 dark:bg-gray-700 p-3 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-102" style="transform: translateZ(6px);">
<span class="text-gray-700 dark:text-gray-200 font-medium">#WebDesignTrends</span>
<span class="text-sm text-gray-500 dark:text-gray-400">55K Posts</span>
</li>
</ul>
</div>
</div>
</aside>
</div>
</div>Componentes relacionados
Componente Componentes de diseño
Un diseño de componente web responsivo que sigue los principios de Material Design para una aplicación de redes sociales con soporte para temas oscuros.
Componentes de diseño
Un componente de diseño complejo diseñado para blogs y consumo de contenido, con microinteracciones y una combinación de colores complementaria. Incluye varios elementos interactivos y es compatible con el modo oscuro.
Diseño de negocio de Glassmorphism
Un componente de diseño de glassmorphism simple y receptivo con soporte para modo oscuro usando Tailwind CSS, con tonos tierra.