Componentes Componentes funcionales Componente de componentes funcionales: interfaz de usuario del modo oscuro

Componente de componentes funcionales: interfaz de usuario del modo oscuro

Un componente de redes sociales receptivo diseñado con modo oscuro y tonos tierra, adecuado para interfaces de redes sociales. Cuenta con avatares de usuario, contenido de publicación y botones de interacción.

Vista previa

Código HTML

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

Componentes relacionados

Paper_Print_Media_Card

Una tarjeta de medios simple y receptiva con un diseño inspirado en el papel/impresión y una combinación de colores pastel, compatible con el modo oscuro. Ideal para plataformas de entretenimiento o medios de comunicación.

Abrir

Microinteractions_Triadic_Dashboard_Component

Un componente de panel de control receptivo con esquema de color triádico, que incorpora microinteracciones para la participación del usuario. Cuenta con elementos y controles de visualización de datos, con soporte completo para el modo oscuro.

Abrir

Componentes funcionales Componente

Un componente de cartera minimalista diseñado con Tailwind CSS, con un esquema de colores vibrantes y compatible con el modo oscuro. Este componente está diseñado para mostrar trabajos o productos e incluye imágenes y marcadores de posición de avatar.

Abrir