Componenti Componenti interattivi Componenti interattivi

Componenti interattivi

Un componente web progettato con elementi scheumorfici per le interfacce dei social media con una combinazione di colori complementari e il supporto del tema scuro.

Anteprima

Codice HTML

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
    <div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
    <div class="flex-1">
        <h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
        <p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
        <p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
        <img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
            <button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
            <button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
    </div>
</div>

Componenti correlati

Componente Componenti interattivi

Un componente interattivo progettato per le piattaforme di lavoro e carriera, con linee fluide organiche ispirate alla natura e una vivace combinazione di colori caramelle/dolci. Include schede lavoro con pulsanti di applicazione e tag abilità, supportando la reattività e la modalità oscura.

Aperto

Componente Componenti interattivi

Un componente interattivo progettato in stile Brutalismo, adatto per mostrare lavori o prodotti con supporto per temi scuri.

Aperto

Componente Componenti interattivi

Una complessa scheda prodotto per l'e-commerce con elementi di design 3D, che utilizza una combinazione di colori triadica, progettata per esperienze di acquisto online interattive con supporto per la modalità reattiva e scura.

Aperto