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>

관련 구성 요소

비디오 플레이어 구성 요소

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

열다

Brutalist_RealEstate_VideoPlayer

부동산 매물을 위한 복잡하고 브루탈리즘 스타일의 비디오 플레이어 구성 요소로, 고대비, 숲/녹색 색상 팔레트, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 속성 세부 정보, 에이전트 정보 및 작업 버튼이 포함됩니다.

열다

비디오 플레이어 구성 요소

고대비와 특이한 레이아웃을 갖춘 Brutalism 스타일의 비디오 플레이어 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다