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

Glassmorphism 미디어 구성 요소 구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Glassmorphism 미디어 구성 요소

미리 보기

HTML 코드 

```html
<div class="dark:bg-gray-900">
  <section class="container mx-auto p-6">
    <div class="flex flex-col md:flex-row items-center">
      <div class="flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900 dark:text-white">Media Component</h1>
        <p class="mb-8 leading-relaxed text-gray-600 dark:text-gray-300">This is a responsive media component with glassmorphism style and dark theme support.</p>
      </div>
      <div class="w-full md:w-1/2">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="object-cover object-center h-full w-full" alt="hero" src="https://picsum.photos/720/600">
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-4 mt-8">
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/720/400" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 1</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/721/401" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 2</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
      <div class="p-4 md:w-1/3">
        <div class="rounded-lg overflow-hidden bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 p-6 backdrop-filter backdrop-blur-lg">
          <img class="h-40 rounded w-full object-cover object-center mb-6" src="https://picsum.photos/722/402" alt="content">
          <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">CATEGORY</h3>
          <h2 class="text-lg text-gray-900 dark:text-white font-medium title-font mb-4">Subheading 3</h2>
          <p class="leading-relaxed text-base text-gray-600 dark:text-gray-300">Fingerstache flexitarian street art 8-bit waistcoat.</p>
        </div>
      </div>
    </div>
  </section>
</div>
```

관련 구성 요소

미디어 구성 요소

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

열다

Glassmorphic 미디어 컴포넌트

Tailwind CSS로 제작된 glassmorphism 디자인(젖빛 유리 효과)이 있는 반응형 미디어 카드 구성 요소입니다. 호버로 표시되는 재생 아이콘이 있는 이미지 자리 표시자(picsum.photos), 텍스트 콘텐츠, 아바타가 있는 작성자 섹션(randomuser.me 에서) 및 작업 버튼이 있습니다. 이 구성 요소는 Tailwind CSS 'dark:' 변형을 사용하여 다크 모드를 지원하며 다양한 화면 크기에 반응합니다. JavaScript가 필요하지 않습니다. 최적의 시각 효과를 얻으려면 이 구성 요소를 대비되는 배경에 배치하십시오. 다크 모드 기능은 적절한 Tailwind CSS 구성(예: tailwind.config.js의 'darkMode: "class"')을 가정합니다.

열다

Playful_Booking_Media_Component

예약/예약 시스템을 위한 단순하고 유쾌하며 반응이 빠른 미디어 구성 요소로, 트라이어딕 색 구성표, 둥근 요소 및 다크 모드 지원을 특징으로 합니다.

열다