구성 요소 미디어 구성 요소 미니멀리스트 미디어 구성 요소

미니멀리스트 미디어 구성 요소

비즈니스/기업 웹사이트를 위한 간단하고 깨끗하며 반응이 빠른 미디어 구성 요소로, 사탕/달콤한 색상 및 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md mx-auto bg-pink-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-2xl lg:max-w-4xl">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/400/300?random=1" alt="Modern business workspace">
      </div>
      <div class="p-4 md:p-6">
        <div class="uppercase tracking-wide text-sm text-pink-500 dark:text-pink-400 font-semibold">Company News</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline transition-colors duration-300">Innovative Solutions for Future Growth</a>
        <p class="mt-2 text-gray-700 dark:text-gray-300 text-sm md:text-base">Our latest report highlights key strategies and technological advancements that are set to redefine industry standards. Discover how we're shaping tomorrow's landscape.</p>
        <div class="mt-4 flex items-center">
          <div class="flex-shrink-0">
            <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar">
          </div>
          <div class="ml-3 text-sm text-gray-600 dark:text-gray-400">
            <p class="font-medium">Jane Doe</p>
            <p>CEO, Tech Innovations</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

레트로 미디어 컴포넌트

레트로/빈티지 디자인의 반응형 미디어 구성 요소는 다크 모드를 지원합니다.

열다

Playful_Booking_Media_Component

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

열다

Glassmorphic 미디어 컴포넌트

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

열다