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.

Vista previa

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 retro de redes sociales

Un diseño simple y monocromático de temática retro para redes sociales, con soporte para el modo oscuro.

Abrir

Diseño de RetroBlog

Un diseño de blog simple y responsivo con una estética retro / vintage, soporte para modo oscuro y un esquema de color complementario, construido con Tailwind CSS.

Abrir

Componente Componentes de diseño

Un componente de diseño de tablero receptivo con un tema oscuro, con una barra lateral y un área de contenido principal. Utiliza un esquema de color triádico para el atractivo visual.

Abrir