CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 미디어 컴포넌트 컴포넌트

미디어 컴포넌트 컴포넌트

Tailwind CSS로 디자인된 매력적인 애니메이션과 함께 마이크로 인터랙션을 특징으로 하는 반응형 미디어 구성 요소입니다. 어두운 테마를 지원하며 자리 표시자 이미지와 아바타를 포함합니다.

미리 보기

HTML 코드 

<div class="w-full max-w-xs bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl duration-300">
    <img src="https://picsum.photos/400/200" alt="Media Image" class="w-full h-32 object-cover">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-md">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Media Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Media description goes here. It can be a brief overview or any content relevant to the media.</p>
            </div>
        </div>
    </div>
    <div class="p-4 border-t border-gray-200 dark:border-gray-700">
        <button class="w-full py-2 text-white bg-blue-500 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 transition duration-150">Watch Now</button>
    </div>
</div>

관련 구성 요소

미디어 컴포넌트 컴포넌트

문서/위키 사이트를 위한 복잡한 다크 모드 UI 미디어 구성 요소로, 그라데이션 무지개 색 구성표를 특징으로 합니다. 여기에는 비디오, 오디오 및 자세한 정보와 대화형 요소가 포함된 이미지와 같은 다양한 미디어 유형이 포함되며 모두 반응형이며 시맨틱 HTML을 사용합니다.

열다

제조를 위한 Glassmorphism 미디어 구성 요소

제조/산업 응용 분야를 위해 설계된 반응형 glassmorphism 미디어 구성 요소로, 반투명 반투명 요소, 시원한 중성 색상 및 다크 모드 지원을 특징으로 합니다.

열다

Playful_Booking_Media_Component

예약/예약 시스템을 위한 단순하고 유쾌하며 반응이 빠른 미디어 구성 요소로, 트라이어딕 색 구성표, 둥근 요소 및 다크 모드 지원을 특징으로 합니다.

열다