Komponenten Medien-Komponenten Komponente "Medienkomponenten"

Komponente "Medienkomponenten"

Eine Medienkomponente im Brutalismus-Stil, die ein fettes Layout mit hohem Kontrast, responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS präsentiert.

Vorschau

HTML-Code

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

Verwandte Komponenten

Bauhaus Analoge Medienkomponente

Eine responsive Medienkomponente mit einem vom Bauhaus inspirierten Design in einem analogen Farbschema, das für Websites von Behörden und öffentlichen Diensten geeignet ist. Verfügt über geometrische Formen, analoge Primärfarben und Unterstützung für den Dunkelmodus.

Offen

Komponente "Medienkomponenten"

Eine reaktionsschnelle Medienkomponente mit Mikrointeraktionen und ansprechenden Animationen, die mit Tailwind CSS gestaltet wurde. Es unterstützt dunkle Themen und enthält Platzhalterbilder und Avatare.

Offen

Medienkomponenten Komponente 39

Eine Medienkomponente, die mit der Benutzeroberfläche des Dunkelmodus entwickelt wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs mit Tailwind CSS bietet.

Offen