구성 요소 미디어 구성 요소 Glassmorphism을 사용한 미디어 구성 요소

Glassmorphism을 사용한 미디어 구성 요소

Glassmorphism 디자인, 반응형 및 다크 모드 지원이 있는 구성 요소

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Card 1 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo1/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 1. It provides some details about the content.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400"> pêøvêl</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo2/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 2. More details about the content can be found here.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Designer</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo3/400/300" alt="Card image">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
          <p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 3, providing additional information.</p>
          <div class="mt-4 flex items-center">
            <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Developer</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

관련 구성 요소

미디어 컴포넌트 컴포넌트

Material Design과 단색 색 구성표를 사용한 전자 상거래를 위한 반응형 미디어 구성 요소입니다.

열다

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

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

열다

Brutalism 예약 미디어 구성 요소

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

열다