CCHub Logo CCHub Tailwind Collection
Komponenten Videoplayer (Videoplayer) Videoplayer-Komponente

Videoplayer-Komponente

Eine reaktionsschnelle Videoplayer-Komponente, die im Brutalismus-Stil mit Unterstützung für dunkle Themen gestaltet ist. Es zeichnet sich durch einen hohen Kontrast und ein fettes Layout aus, verwendet Tailwind CSS für das Styling und enthält Platzhalterbilder und Avatare.

Vorschau

HTML-Code 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
  <h2 class="text-3xl font-bold mb-4">Video Player</h2>
  <div class="relative mb-4">
    <img class="w-full h-auto rounded-lg" src="https://picsum.photos/800/450" alt="Placeholder Video Thumbnail" />
    <div class="absolute inset-0 flex items-center justify-center">
      <button class="bg-red-600 text-white p-3 rounded-full focus:outline-none">
        Play
      </button>
    </div>
  </div>
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
    <div class="ml-3">
      <p class="text-lg font-semibold">User Name</p>
      <p class="text-sm text-gray-400">Uploaded 2 days ago</p>
    </div>
  </div>
  <div class="flex justify-between text-sm text-gray-400">
    <span>1,234 views</span>
    <span>20 likes</span>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold">Description</h3>
    <p class="text-gray-300 mt-2">This is a brief description of the video content, designed in a bold, raw style that reflects the principles of brutalism.</p>
  </div>
</div>

Verwandte Komponenten

Videoplayer-Komponente

Videoplayer-Komponente mit Glassmorphism-Stil, analogem Farbschema und mittlerer Komplexität für Blog-/Content-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Kein Javascript.

Offen

Skeuomorphic_Farm_Video_Player

Eine skeuomorphe Videoplayer-Komponente, die für Landwirtschafts- und Landwirtschaftswebsites entwickelt wurde, mit Schwarzweiß mit heller Akzentfarbe, responsivem Layout und Unterstützung des Dunkelmodus.

Offen

Videoplayer-Komponente

Eine reaktionsschnelle Videoplayer-Komponente, die für einen Blog oder den Konsum von Inhalten mit Mikrointeraktionen und einem pastellfarbenen Farbschema entwickelt wurde. Es verfügt über eine Play/Pause-Funktion und einen Lautstärkeregler. Das Design bietet auch Unterstützung für den Dunkelmodus.

Offen