Panel de control de redes sociales
Un componente de panel de control de redes sociales receptivo con microinteracciones, combinación de colores complementaria, complejidad moderada y compatibilidad con temas oscuros mediante Tailwind CSS. Incluye perfiles de usuario con avatares de randomuser.me y feeds con imágenes de picsum.photos.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col md:flex-row gap-4">
<!-- Sidebar (User Profile) -->
<div class="w-full md:w-1/4 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mb-4 border-2 border-blue-500">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
<div class="mt-4 flex gap-4">
<span class="text-blue-500 cursor-pointer hover:underline">Followers: 1.2k</span>
<span class="text-blue-500 cursor-pointer hover:underline">Following: 350</span>
</div>
</div>
</div>
<!-- Main Content (Feed) -->
<div class="w-full md:w-3/4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 mb-4 transform transition duration-300 hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Jane Smith</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-300 mb-4">Enjoying a beautiful day out in the nature! #nature #happy</p>
<img src="https://picsum.photos/600/400" alt="Post Image" class="rounded-lg mb-4">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span class="cursor-pointer hover:text-blue-500">Likes: 25</span>
<span class="cursor-pointer hover:text-blue-500">Comments: 5</span>
<span class="cursor-pointer hover:text-blue-500">Share</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/60.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4">New blog post is up! Check it out. #blogging #technology</p>
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span class="cursor-pointer hover:text-blue-500">Likes: 15</span>
<span class="cursor-pointer hover:text-blue-500">Comments: 3</span>
<span class="cursor-pointer hover:text-blue-500">Share</span>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Paneles
Un componente de tablero de inspiración retro diseñado para sitios web comerciales o corporativos que combina la estética de los años 80/90 con un diseño y una combinación de colores modernos. Es responsivo y admite el tema oscuro, con elementos interactivos como tarjetas para estadísticas, perfiles de usuario y más.
Dashboard_Event_Conference
Un panel de control complejo, monoespaciado/temático para desarrolladores para la gestión de eventos y conferencias, con una combinación de colores dulces/dulces y una capacidad de respuesta total con soporte para el modo oscuro.
Componente Paneles
Un componente de tablero complejo diseñado para el modo oscuro con un esquema de color monocromático para uso empresarial/corporativo. Cuenta con elementos interactivos enriquecidos y es responsivo.