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

미디어 컴포넌트 컴포넌트

레트로/빈티지 디자인 스타일에서 영감을 받은 반응형 미디어 구성 요소로, 80년대/90년대의 향수를 불러일으키는 미학을 특징으로 합니다. Tailwind CSS로 어두운 테마를 지원하며 자리 표시자 이미지와 아바타를 포함합니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm mx-auto">
    <img class="rounded-lg w-full h-48 object-cover mb-4" src="https://picsum.photos/seed/media/400/200" alt="Media Thumbnail">
    <h2 class="text-2xl font-bold mb-2 text-gray-800 dark:text-gray-200">Retro Media Title</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media component, capturing the essence of the nostalgia from the 80s and 90s.</p>
    <div class="flex items-center">
        <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
            <p class="text-gray-800 dark:text-gray-200 font-semibold">User Name</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Posted on March 1, 2023</p>
        </div>
    </div>
</div>

관련 구성 요소

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

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

열다

미디어 컴포넌트 컴포넌트

복잡하고 반응이 빠른 다크 모드 호환 소셜 미디어 미디어 구성 요소로, 생생한 색상을 사용하는 Glassmorphism 스타일을 사용합니다.

열다

미디어 컴포넌트 컴포넌트

브루탈리즘 스타일로 디자인된 미디어 구성 요소로, Tailwind CSS를 사용하여 고대비, 반응형 효과 및 어두운 테마 지원을 갖춘 대담한 레이아웃을 보여줍니다.

열다