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

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

Отзывчивый компонент видеоплеера, выполненный в стиле брутализм с поддержкой темных тем. Он отличается высокой контрастностью и смелым макетом, использует Tailwind CSS для стилизации и включает в себя изображения-заполнители и аватары.

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

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>

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

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

Адаптивный компонент видеоплеера, разработанный в стиле Neumorphism, с использованием Tailwind CSS. Он поддерживает темный режим с мягкими тенями для придания мягкого внешнего вида пользовательскому интерфейсу.

Открытый

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

Отзывчивый компонент видеоплеера с дизайном Glassmorphism, цветовой схемой земляных тонов и поддержкой темного режима. Использует простой HTML и Tailwind CSS.

Открытый

Скевоморфный видеоплеер

Скевоморфный компонент видеоплеера с отзывчивыми эффектами и поддержкой темных тем.

Открытый