Componente de diseño 3D
Un componente de diseño de redes sociales de diseño 3D receptivo con un esquema de color en escala de grises. Adecuado para interfaces de redes sociales.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 transform hover:scale-105 transition-transform duration-300">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md border-2 border-gray-300 dark:border-gray-700">
<h2 class="text-gray-800 dark:text-white text-lg font-semibold ml-4">User Name</h2>
</div>
<div class="mb-4">
<img src="https://picsum.photos/400/200" alt="Post Image" class="rounded-lg shadow-md">
</div>
<div class="text-gray-600 dark:text-gray-300">
<p class="mb-2">This is a simple social media post showcasing a 3D design layout. Engage with your network in style!</p>
</div>
<div class="mt-4 flex space-x-4">
<button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Like</button>
<button class="bg-gray-800 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-gray-600">Comment</button>
</div>
</div>Componentes relacionados
Diseño del reproductor de música Cyberpunk
Un diseño de reproductor de música de temática cyberpunk con estética de neón futurista, fondos oscuros y colores de acento vibrantes, diseñado para brindar capacidad de respuesta y compatibilidad con el modo oscuro.
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.
Componente de diseño de modo oscuro
Un componente de diseño responsivo con soporte de modo oscuro mediante Tailwind CSS. Cuenta con un encabezado, un área de contenido y un pie de página simples. El modo oscuro se maneja mediante el prefijo 'dark:' en las clases de Tailwind.