Componenti Carte Componente Carte Skeuomorfe

Componente Carte Skeuomorfe

Un semplice componente di schede progettato in uno stile scheumorfico, utilizzando una combinazione di colori analoga per la lettura e il consumo di contenuti. Questo componente è reattivo e supporta il tema scuro.

Anteprima

Codice HTML

<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
  <div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
    <img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
      <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
        <p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente Carte Neumorfiche

Un componente di carte reattivo progettato in stile Neumorfismo con supporto per temi scuri, con ombre sottili e layout flessibile.

Aperto

Music_Cards_Component

Un componente per scheda audio/musicale reattivo con ricche sfumature di toni gioiello e transizioni fluide, con supporto per la modalità scura. Layout semplice per la visualizzazione di album o brani.

Aperto

Forum_Community_Cards_Component

Un componente di carte reattivo e interattivo per un forum o una piattaforma di community, con una combinazione di colori retrò/vintage e sottili effetti al passaggio del mouse per le microinterazioni. Include il supporto per la modalità oscura e l'HTML semantico.

Aperto