Social_Media_Dashboard
Un componente complejo del panel de control de redes sociales con una estética monocromática de Material Design, con diseños basados en cuadrículas, efectos de profundidad y capacidad de respuesta con soporte para modo oscuro. Diseñado para interfaces de redes sociales.
Código HTML
<div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen text-gray-900 dark:text-gray-100 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Main Content Area -->
<div class="md:col-span-2 lg:col-span-3 flex flex-col gap-6">
<!-- Top Navigation/Search -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-4 flex items-center space-x-4">
<div class="relative flex-grow">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
<input type="text" placeholder="Search posts, friends, and more..." class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
</div>
<button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h.01M12 21v-4m-3 4v-4m0 0h6m-12 0H6m6 0C5.03 17 3 14.654 3 12S5.03 7 7.5 7h9C18.97 7 21 9.346 21 12s-2.03 5-4.5 5h-9z"></path></svg>
</button>
<button class="p-2 rounded-full bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path></svg>
</button>
</div>
<!-- Create Post Widget -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h2 class="text-xl font-semibold mb-4">Create New Post</h2>
<div class="flex items-center space-x-4 mb-4">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<input type="text" placeholder="What's on your mind?" class="flex-grow py-2 px-4 rounded-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
</div>
<div class="flex justify-between items-center">
<div class="flex space-x-4">
<button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6l.01 0M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
<span class="text-sm hidden sm:block">Photo</span>
</button>
<button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8V4a1 1 0 011-1h6a1 1 0 011 1v4M7 16v4a1 1 0 001 1h6a1 1 0 001-1v-4M4 8h16M4 16h16"></path></svg>
<span class="text-sm hidden sm:block">Video</span>
</button>
<button class="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
<span class="text-sm hidden sm:block">Location</span>
</button>
</div>
<button class="px-6 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow-md hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
Post
</button>
</div>
</div>
<!-- Feed Post - Example 1 (with image) -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<div class="flex items-center space-x-3 mb-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-semibold">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">Enjoying the beautiful autumn colors! Such a peaceful afternoon spent exploring the local park. #AutumnVibes #NatureLover</p>
<img class="rounded-lg mb-4 w-full h-auto object-cover max-h-96" src="https://picsum.photos/800/500?random=1" alt="Post Image">
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="flex space-x-6">
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
<span>120</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
<span>45</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
<span>15</span>
</button>
</div>
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
</div>
</div>
<!-- Feed Post - Example 2 (text only) -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<div class="flex items-center space-x-3 mb-4">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
<div>
<p class="font-semibold">John Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="mb-4 text-gray-700 dark:text-gray-300">Just finished a great coding session! Feeling productive and ready to tackle the next challenge. #codinglife #developer</p>
<div class="flex justify-between items-center text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 pt-4">
<div class="flex space-x-6">
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
<span>88</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
<span>30</span>
</button>
<button class="flex items-center space-x-1 hover:text-blue-500 transition duration-150">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.552 3.546m-6.552-3.546L12 10.5m7.5-2.046l.758-.426M6.44 14.35H5.05M18 10a8 8 0 10-16 0V5a2 2 0 012-2h3a2 2 0 012 2v2.185a4.85 4.85 0 01-. .815a4.85 4.85 0 01-. .815"></path></svg>
<span>8</span>
</button>
</div>
<button class="text-sm text-blue-600 dark:text-blue-400 hover:underline transition duration-150">View comments</button>
</div>
</div>
</div>
<!-- Sidebar / Widgets Area -->
<div class="md:col-span-1 lg:col-span-1 flex flex-col gap-6">
<!-- Profile Card -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 text-center">
<img class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Avatar">
<h3 class="text-xl font-semibold mb-1">Alex Johnson</h3>
<p class="text-gray-600 dark:text-gray-400">Web Developer | Enthusiast</p>
<div class="flex justify-around items-center mt-4 border-t border-b border-gray-200 dark:border-gray-700 py-3">
<div>
<p class="font-semibold text-lg">1.2K</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Followers</p>
</div>
<div>
<p class="font-semibold text-lg">500</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Following</p>
</div>
<div>
<p class="font-semibold text-lg">89</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Posts</p>
</div>
</div>
<button class="mt-4 w-full px-4 py-2 bg-blue-600 text-white dark:bg-blue-500 dark:text-white rounded-full font-medium shadow hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-150 ease-in-out">
View Profile
</button>
</div>
<!-- Trending Topics Widget -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Trending Topics</h3>
<ul class="space-y-3">
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#1</span> #AIRevolution <span class="text-xs text-gray-500 dark:text-gray-400">(1.5M posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#2</span> #FrontendDev <span class="text-xs text-gray-500 dark:text-gray-400">(980K posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#3</span> #SustainableLiving <span class="text-xs text-gray-500 dark:text-gray-400">(720K posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#4</span> #TravelGoals <span class="text-xs text-gray-500 dark:text-gray-400">(600K posts)</span></a></li>
<li><a href="#" class="block text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition duration-150"><span class="text-gray-500 dark:text-gray-400 font-normal">#5</span> #HealthAndFitness <span class="text-xs text-gray-500 dark:text-gray-400">(550K posts)</span></a></li>
</ul>
</div>
<!-- Who to Follow Widget -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6">
<h3 class="text-xl font-semibold mb-4">Who to Follow</h3>
<ul class="space-y-4">
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="font-semibold">Sarah Green</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@sarah_g</p>
</div>
</div>
<button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
Follow
</button>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/men/25.jpg" alt="User Avatar">
<div>
<p class="font-semibold">David Lee</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@davidd_lee</p>
</div>
</div>
<button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
Follow
</button>
</li>
<li class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-blue-300 dark:border-blue-700" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div>
<p class="font-semibold">Emily Chen</p>
<p class="text-sm text-gray-500 dark:text-gray-400">@emily_c</p>
</div>
</div>
<button class="px-4 py-1 text-sm bg-blue-50 dark:bg-blue-900 text-blue-600 dark:text-blue-200 rounded-full hover:bg-blue-100 dark:hover:bg-blue-800 transition duration-150">
Follow
</button>
</li>
</ul>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de visualización de datos
Un componente de visualización de datos con capacidad de respuesta diseñado con los principios de Material Design, como diseños basados en cuadrículas y efectos de profundidad, con soporte para temas oscuros.
Componente de visualización de datos Art Deco
Un componente de visualización de datos complejo y receptivo de estilo Art Deco para servicios de consultoría, con patrones geométricos y un lujoso esquema de color púrpura/violeta. Incluye soporte para modo oscuro.
Componente de componentes de visualización de datos
Un componente de reserva/reserva complejo y minimalista con un esquema de color neón/eléctrico, con elementos de visualización de datos como un calendario y un selector de franjas horarias. Totalmente receptivo con soporte para modo oscuro.