구성 요소 비디오 플레이어 비디오 플레이어 구성 요소

비디오 플레이어 구성 요소

포트폴리오 전시를 위해 설계된 네오모픽 비디오 플레이어 구성 요소로, Tailwind CSS를 사용하여 어두운 테마와 반응형 디자인을 특징으로 합니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="bg-gray-300 dark:bg-gray-800 w-full md:w-3/4 rounded-xl overflow-hidden shadow-inner">
        <video controls class="w-full h-auto">
            <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="mt-4 text-center">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Showcase Title</h2>
        <p class="text-gray-600 dark:text-gray-400">A short description of the video content goes here. Highlight your work effectively.</p>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 shadow-inner">
        <div class="ml-3">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">User Name</span>
        </div>
    </div>
</div>

관련 구성 요소

Gradient Rainbow Video Player 컴포넌트

대시보드를 위한 깔끔하고 미니멀한 비디오 플레이어 구성 요소로, 그라데이션 무지개 색 구성표, 반응형 디자인, 다크 모드 지원을 특징으로 하며 스위스/국제 타이포그래피 스타일을 구현합니다.

열다

비디오 플레이어 구성 요소

어두운 테마를 지원하는 잔인함 스타일로 설계된 반응형 비디오 플레이어 구성 요소입니다. 스타일링을 위해 Tailwind CSS를 활용하고 자리 표시자 이미지와 아바타를 포함하는 높은 대비와 대담한 레이아웃이 특징입니다.

열다

비디오 플레이어 구성 요소

대시보드에 적합한 3D 스타일과 파스텔 색 구성표로 설계된 간단한 비디오 플레이어 구성 요소입니다.

열다