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을 사용합니다.

열다

Bauhaus 유사 미디어 구성 요소

Bauhaus에서 영감을 받은 디자인의 반응형 미디어 구성 요소로, 유사한 색 구성표를 사용하여 정부/공공 서비스 웹 사이트에 적합합니다. 기하학적 형태, 기본 유사 색상 및 다크 모드 지원이 특징입니다.

열다

Simple Neumorphism E-commerce 미디어 구성 요소

흙색, 단순한 복잡성, 전자 상거래 사이트용, 반응형 디자인 및 어두운 테마 지원이 있는 뉴모피즘 스타일의 미디어 구성 요소. 이미지에 picsum.photos를 사용합니다.

열다