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

비디오 플레이어 구성 요소

포트폴리오 전시를 위해 설계된 네오모픽 비디오 플레이어 구성 요소로, 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>

관련 구성 요소

Material_Design_Video_Player_Component

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

열다

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

Tailwind CSS를 사용하여 어두운 테마를 지원하는 Neumorphism 스타일로 설계된 반응형 비디오 플레이어 구성 요소입니다.

열다

Skeuomorphic_Farm_Video_Player

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

열다