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

미디어 구성 요소

반응형 디자인과 어두운 테마를 지원하는 미디어 디스플레이를 위한 Neumorphism 스타일 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-white rounded-xl shadow-lg dark:bg-gray-800 dark:shadow-gray-900 hover:shadow-xl transition-shadow duration-300 ease-in-out">
    <div class="mb-4">
        <img src="https://picsum.photos/300/200" alt="Media" class="w-full h-auto rounded-lg shadow-md" />
    </div>
    <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg mr-2">
        <h2 class="text-lg font-semibold dark:text-white">User Name</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300 text-center">
        This is a description of the media content that is displayed above. It's designed with a soft UI style to enhance the visual appeal.
    </p>
</div>

관련 구성 요소

미디어 컴포넌트 컴포넌트

브루탈리즘 디자인, 생생한 색상, 대시보드의 복잡한 레이아웃을 갖춘 반응형 미디어 구성 요소 구성 요소로, 어두운 테마를 지원하고 JavaScript를 사용하지 않습니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다

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

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

열다

Brutalism 예약 미디어 구성 요소

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

열다