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

미디어 임베드 컴포넌트

블로그 및 콘텐츠 소비에 적합한 Neumorphism 스타일의 미디어 포함 구성 요소로, 트라이어딕 색 구성표를 특징으로 합니다. 다크 모드를 지원하는 반응형 디자인.

미리 보기

HTML 코드 

<div class="flex items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">
    <div class="flex flex-col bg-white dark:bg-gray-900 rounded-lg p-4 shadow-lg">
        <img src="https://picsum.photos/400/200" alt="Media Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Media Title</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the media content to provide context to the readers.</p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-700 dark:text-gray-300">Author Name</span>
        </div>
    </div>
</div>

관련 구성 요소

스큐어모픽 미디어 임베드 컴포넌트

스큐어모피즘 디자인, 아날로그 색 구성표 및 비즈니스 웹 사이트를 위한 적당한 복잡성을 갖춘 반응형 미디어 임베드 구성 요소입니다. Tailwind CSS를 사용한 다크 모드 지원이 포함됩니다.

열다

사이버펑크 스포츠 미디어 임베드

사이버펑크 미학을 가진 스포츠/피트니스 애플리케이션용으로 설계된 복잡하고 반응이 빠른 미디어 임베드 구성 요소입니다. 밝은 네온 액센트가 있는 단색의 어두운 배경, 여러 대화형 요소 및 완전한 다크 모드 지원이 특징입니다.

열다

Brutalist_Retro_Media_Embed_E 상거래

전자 상거래를 위한 복잡하고 반응이 빠른 브루탈리즘 스타일의 미디어 임베드 구성 요소로, 고대비, 레트로 색상 팔레트, 다크 모드 지원 및 제품 쇼케이스를 위한 여러 인터랙티브 요소를 제공합니다.

열다