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
Dashboard_Weather_Climate_Swiss
Un componente de tablero de clima y tiempo complejo y sensible inspirado en la tipografía suiza/internacional, que utiliza tonos tierra y admite el modo oscuro. Cuenta con múltiples puntos de datos como el tiempo actual, el pronóstico, la calidad del aire y las tendencias climáticas.
Tablero de control de Memphis Sepia
Un componente de tablero con una estética de Memphis Design, con formas geométricas audaces y una paleta de colores sepia / marrón cálido, adecuado para sitios web comerciales y corporativos. Incluye capacidad de respuesta completa y soporte para modo oscuro.
Componente Paneles
Un componente de tablero minimalista que muestra un diseño plano con efectos responsivos y soporte para temas oscuros, construido con Tailwind CSS.