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>

관련 구성 요소

Industrial_Marketplace_Media_Component

마켓플레이스를 위한 단순한 인더스트리얼 스타일의 미디어 구성 요소로, 이미지, 제목 및 가격을 특징으로 하며 원자재와 실용적인 미학에 중점을 둡니다. 단풍을 사용하며 다크 모드를 지원합니다.

열다

Brutalism_Job_Media_Card

구인 게시판을 위한 복잡하고 브루탈리즘 스타일의 미디어 구성 요소로, 높은 대비, 대담한 타이포그래피, 자주색/보라색 색 구성표를 특징으로 합니다. 다크 모드 지원으로 반응형.

열다

미디어 컴포넌트 컴포넌트

금융/은행 인터페이스를 위해 설계된 복잡하고 반응성이 뛰어난 미디어 구성 요소로, Ocean/Blue 색 구성표와 기본 다크 모드 지원을 특징으로 합니다.

열다