Componenti Componenti funzionali Componenti funzionali Componente - Interfaccia utente in modalità scura

Componenti funzionali Componente - Interfaccia utente in modalità scura

Un componente di social media reattivo progettato con modalità oscura e toni della terra, adatto per le interfacce di social networking. Presenta avatar utente, contenuti di pubblicazione e pulsanti di interazione.

Anteprima

Codice 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>

Componenti correlati

Carta di prenotazione cartacea/stampata

Un componente semplice e reattivo per la scheda di prenotazione/prenotazione con un design ispirato alla carta/stampa e una combinazione di colori color terra, con supporto per la modalità scura. Adatto per visualizzare gli slot degli appuntamenti o i dettagli della prenotazione.

Aperto

Corporate_Portfolio_Showcase_Simple

Un componente semplice, pulito e affidabile per la presentazione del portfolio progettato per ambienti aziendali professionali, che utilizza una combinazione di colori triadica e supporta la modalità scura.

Aperto

Skeuomorphic_Analogous_Simple_Business_Component

Un semplice componente aziendale progettato con uno stile scheumorfico utilizzando colori analoghi, reattivo per desktop, tablet e dispositivi mobili, con supporto per la modalità scura.

Aperto