비디오 플레이어 구성 요소

Tailwind CSS를 사용하여 Neumorphism 스타일로 설계된 반응형 비디오 플레이어 구성 요소입니다. 부드러운 UI 모양을 제공하기 위해 미묘한 그림자가 있는 어두운 모드를 지원합니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 max-w-lg w-full">
        <div class="flex justify-center mb-4">
            <video class="rounded-lg shadow-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>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
            <div class="text-sm">
                <p class="text-gray-900 dark:text-white font-medium">John Doe</p>
                <p class="text-gray-500 dark:text-gray-300">Uploaded 2 days ago</p>
            </div>
        </div>
        <div class="mt-4">
            <p class="text-gray-800 dark:text-gray-300">A brief description of the video content goes here. It can detail key points or the overall theme of the video.</p>
        </div>
    </div>
</div>

비디오 플레이어 구성 요소

미리 보기

HTML 코드

관련 구성 요소

비디오 플레이어

비디오 플레이어 구성 요소

미니멀리스트 비디오 플레이어