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

비디오 플레이어 구성 요소

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

관련 구성 요소

비디오 플레이어 구성 요소

Glassmorphism 스타일, 아날로그 색 구성표 및 블로그/콘텐츠 목적을 위한 중간 수준의 복잡성을 갖춘 비디오 플레이어 구성 요소, Tailwind CSS를 사용하여 반응형 디자인 및 어두운 테마 지원. 자바스크립트가 없습니다.

열다

비디오 플레이어 구성 요소

glassmorphism 스타일로 디자인된 반응형 비디오 플레이어 구성 요소로, 흐림 효과, 어두운 테마 지원 및 자리 표시자 이미지가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다.

열다

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

Tailwind CSS를 사용하여 HTML로 코딩된 비디오 플레이어 구성 요소. 대시보드용으로 고안된 그레이스케일 색 구성표를 사용하는 미니멀한 디자인입니다. 여러 대화형 요소가 있는 복잡한 구성 요소이며 다크 모드 지원으로 완벽하게 반응합니다.

열다