Componenti Componenti multimediali Componente Componenti multimediali

Componente Componenti multimediali

Un componente multimediale progettato in stile brutalismo, che mostra un layout audace con contrasto elevato, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Anteprima

Codice HTML

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-gray-300 dark:border-gray-700">
  <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">Media Component</h2>
  <div class="flex flex-col md:flex-row items-start md:items-center gap-6">
    <img src="https://picsum.photos/400/300" alt="Random Image" class="rounded-lg mb-4 md:mb-0 md:w-1/2" />
    <div class="flex-1">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-2">Media Title</h3>
      <p class="text-gray-700 dark:text-gray-400 mb-4">
        This is a sample description of the media content. It is meant to give an overview of what the media is about in a raw and bold style.
      </p>
      <span class="inline-block font-bold text-gray-900 dark:text-white mb-2">
        Uploaded by: <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="inline-block w-8 h-8 rounded-full border-2 border-white dark:border-gray-800"> John Doe
      </span>
    </div>
  </div>
  <div class="mt-4 flex gap-4">
    <button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Watch</button>
    <button class="bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Learn More</button>
  </div>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-gray-800, .bg-gray-700 {
      background-color: #4a5568;
    }
    .text-gray-200 {
      color: #edf2f7;
    }
    .text-gray-400 {
      color: #a0aec0;
    }
  }
</style>

Componenti correlati

Cyberpunk_Dating_Media_Component

Un componente multimediale reattivo per piattaforme di appuntamenti/social con un'estetica cyberpunk, con colori vivaci di caramelle, sfondi scuri ed elementi interattivi. Supporta la modalità oscura.

Aperto

Componente Componenti multimediali

Un componente Media Components reattivo con un design brutalista, colori vivaci e layout complesso per una dashboard, con supporto per temi scuri e senza JavaScript. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.

Aperto

Componente Componenti multimediali

Un componente multimediale complesso e in modalità scura per siti di documentazione/wiki, caratterizzato da una combinazione di colori arcobaleno sfumato. Include vari tipi di media come video, audio e immagini con informazioni dettagliate ed elementi interattivi, tutti reattivi e che utilizzano HTML semantico.

Aperto