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

비디오 플레이어 구성 요소

소셜 미디어 인터페이스용으로 설계된 미니멀한 비디오 플레이어 구성 요소로, 어두운 테마를 지원하는 반응형 레이아웃을 특징으로 합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
    <video class="w-full h-64" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="p-4">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar">
            <div class="ml-3">
                <h2 class="text-white text-lg font-semibold">User Name</h2>
                <p class="text-gray-400 dark:text-gray-300 text-sm">2 hours ago</p>
            </div>
        </div>
        <div class="mt-2">
            <p class="text-gray-200 dark:text-gray-300 text-sm">Enjoy this video of a beautiful landscape!</p>
        </div>
        <div class="mt-4 flex justify-between text-gray-400 dark:text-gray-500">
            <button class="hover:text-white focus:outline-none">Like</button>
            <button class="hover:text-white focus:outline-none">Share</button>
            <button class="hover:text-white focus:outline-none">Comment</button>
        </div>
    </div>
</div>

관련 구성 요소

비디오 플레이어 구성 요소

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

열다

Neon_Glow_Video_Player

비즈니스/기업 웹사이트를 위한 간단하고 반응이 빠른 비디오 플레이어 구성 요소로, 네온/글로우 효과와 따뜻한 일몰 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

비디오 플레이어 구성 요소

glassmorphism으로 디자인된 비디오 플레이어 구성 요소로, 보색과 함께 젖빛 유리와 같은 효과를 특징으로 합니다. 대화식이며 반응형이며 어두운 테마를 지원하는 블로그 콘텐츠 소비에 적합합니다.

열다