CCHub Logo CCHub Tailwind Collection
구성 요소 미디어 구성 요소 미디어 구성 요소 구성 요소 2

미디어 구성 요소 구성 요소 2

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

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/retro/400/300" alt="Retro Image">
    <div class="p-6">
        <div class="flex items-center mb-4">
            <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400 text-sm">@johndoe</p>
            </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample text for the media component, showcasing a retro design that brings back memories from the 80s and 90s.</p>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400 font-semibold">Read More</a>
    </div>
</div>

관련 구성 요소

아르 데코 여행 미디어 구성 요소

여행 및 관광 웹사이트를 위한 복잡한 아르데코에서 영감을 받은 미디어 구성 요소로, 세피아/브라운 톤과 기하학적 패턴의 목적지 하이라이트를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

미디어 컴포넌트 컴포넌트

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

열다

Brutalism 예약 미디어 구성 요소

예약/예약 시스템을 위한 단순하고 브루탈리즘 스타일의 미디어 구성 요소로, 높은 대비와 보색 구성표를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.

열다