Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu dans un style brutaliste avec prise en charge du thème sombre. Il présente un contraste élevé et une mise en page audacieuse, utilisant Tailwind CSS pour le style et comprend des images et des avatars de remplacement.
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>Composants associés
Composant du lecteur vidéo
Un lecteur vidéo de style Glassmorphism avec des éléments translucides semblables à du verre givré, une palette de couleurs pastel et une interface complexe adaptée aux sites Web d’entreprise. Il prend en charge le responsive design et un thème sombre utilisant Tailwind CSS, sans JavaScript.
Composant du lecteur vidéo
Un composant de lecteur vidéo conçu avec glassmorphism, avec un effet de verre dépoli avec des couleurs complémentaires. Il est interactif et réactif, adapté à la consommation de contenu de blog avec prise en charge du thème sombre.
Composant du lecteur vidéo
Composant de lecteur vidéo minimaliste / plat pour le commerce électronique, réactif avec prise en charge du thème sombre