Videoplayer-Komponente
Eine Videoplayer-Komponente, die mit Glasmorphismus entworfen wurde und einen mattglasähnlichen Effekt mit Komplementärfarben aufweist. Es ist interaktiv und reaktionsschnell und eignet sich für den Konsum von Blog-Inhalten mit Unterstützung für dunkle Themen.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="relative w-full max-w-lg p-5 bg-white bg-opacity-20 backdrop-blur-lg rounded-xl shadow-lg border border-gray-200 dark:bg-gray-900 dark:bg-opacity-30 dark:border-gray-700">
<video class="w-full rounded-lg" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Video Title</h2>
<p class="text-gray-600 dark:text-gray-400">Brief description of the video content that gives users an idea of what to expect.</p>
</div>
<div class="flex items-center mt-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-2">
<p class="text-gray-800 dark:text-gray-200 font-medium">User Name</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Published on: <time datetime="2023-10-01">October 1, 2023</time></p>
</div>
</div>
</div>
</div>Verwandte Komponenten
Videoplayer-Komponente
Eine reaktionsschnelle Videoplayer-Komponente, die für den Dunkelmodus mit einem analogen Farbschema für den Konsum von Inhalten entwickelt wurde.
Videoplayer-Komponente
Eine Videoplayer-Komponente im Brutalismus-Stil mit hohem Kontrast und ungewöhnlichem Layout, mit responsivem Design und Unterstützung für dunkle Themen mit Tailwind CSS.
Videoplayer-Komponente
Eine reaktionsschnelle Videoplayer-Komponente, die mit Tailwind CSS gestaltet wurde und sich auf Mikrointeraktionen und die Unterstützung dunkler Themen konzentriert.