CCHub Logo CCHub Tailwind Collection
구성 요소 비디오 플레이어 비디오 플레이어 구성 요소

비디오 플레이어 구성 요소

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>

관련 구성 요소

Skeuomorphic_Farm_Video_Player

농업 및 농업 웹사이트용으로 설계된 스큐어모픽 비디오 플레이어 구성 요소로, 밝은 액센트 색상의 흑백, 반응형 레이아웃 및 다크 모드 지원을 특징으로 합니다.

열다

비디오 플레이어 구성 요소

젖빛 유리와 같은 반투명 요소, 파스텔 색 구성표 및 비즈니스/기업 웹사이트에 적합한 복잡한 인터페이스를 갖춘 Glassmorphism 스타일의 비디오 플레이어입니다. JavaScript 없이 Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

Material_Design_Video_Player_Component

머티리얼 디자인 미학, 따뜻한 중성 색 구성표, 다크 모드 지원을 갖춘 반응형 비디오 플레이어 구성 요소로, 예약/예약 시스템에 적합합니다. 동영상 썸네일, 재생 버튼, 제목, 설명 및 '지금 예약하기' 클릭 유도문안이 포함되어 있습니다.

열다