Componente lettore video
Un componente del lettore video reattivo progettato in stile brutalismo con supporto per temi scuri. Presenta un contrasto elevato e un layout audace, utilizza Tailwind CSS per lo stile e include immagini segnaposto e avatar.
Codice HTML
<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>Componenti correlati
Componente lettore video
Un componente per lettore video minimalista progettato per le interfacce dei social media, caratterizzato da un layout reattivo con supporto per temi scuri.
Componente lettore video
Un semplice componente del lettore video progettato utilizzando i principi di Material Design con un layout reattivo e il supporto del tema scuro.
Componente lettore video
Componente lettore video con stile Glassmorphism, combinazione di colori analoga e complessità moderata per scopi di blog/contenuti, con design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Nessun Javascript.