Componenti Componenti di visualizzazione dei contenuti Componenti di visualizzazione dei contenuti

Componenti di visualizzazione dei contenuti

Un componente reattivo per la visualizzazione dei contenuti dei social media progettato in stile scheumorfico con colori pastello, con più elementi interattivi e supporto per la modalità oscura.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
    <img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
    <div class="flex justify-between items-center">
        <button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
        <button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
        <button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
    </div>
</div>

Componenti correlati

Memphis_Content_Display_Component

Un componente di visualizzazione dei contenuti complesso e reattivo per piattaforme di intrattenimento/multimediali, caratterizzato da uno stile Memphis Design con una combinazione di colori in bianco e nero e un colore d'accento brillante (fucsia). Include il supporto per la modalità oscura e immagini segnaposto.

Aperto

Visualizzazione di contenuti semplici

Un semplice componente di visualizzazione dei contenuti con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti semplice e reattivo progettato in stile brutalista con colori complementari. Adatto per siti Web aziendali/aziendali, supporta la modalità oscura.

Aperto