Компоненты Видеоплеер 3D монохроматический видеоплеер

3D монохроматический видеоплеер

Отзывчивый компонент видеоплеера с элементами 3D-дизайна и монохроматической цветовой гаммой, подходящий для приборной панели.

Предварительный просмотр

HTML-код

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">  <div class="relative w-full max-w-2xl rounded-lg shadow-xl overflow-hidden dark:shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-500 hover:scale-105">    <div class="aspect-w-16 aspect-h-9">      <video controls class="w-full h-full object-cover">        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">        Your browser does not support the video tag.      </video>    </div>    <div class="p-6">      <h3 class="text-2xl font-semibold text-gray-800 dark:text-white mb-3">Video Title</h3>      <p class="text-gray-600 dark:text-gray-300">A brief description of the video content goes here. This is a sample video demonstrating the video player component with a 3D-like feel and monochromatic colors.</p>    </div>    <div class="absolute inset-0 pointer-events-none">      <div class="absolute inset-0 bg-gradient-to-br from-gray-200 via-transparent to-gray-300 opacity-20 dark:from-gray-700 dark:to-gray-800 rounded-lg"></div>    </div>  </div></div>

Связанные компоненты

Компонент видеоплеера

Компонент видеоплеера со стилем Glassmorphism, аналогичной цветовой схемой и умеренной сложностью для блога/контента, с адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS. Без Javascript.

Открытый

Видеоплеер

Компонент видеоплеера с микровзаимодействиями, дополнительной цветовой схемой, умеренной сложностью и адаптивным дизайном с поддержкой темной темы для использования в портфолио.

Открытый

Компонент видеоплеера

Компонент видеоплеера в ретро/винтажном стиле с адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.

Открытый