구성 요소 미디어 구성 요소 레트로 미디어 컴포넌트

레트로 미디어 컴포넌트

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

미리 보기

HTML 코드

<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md transform hover:scale-105 transition duration-300">
  <img class="w-full h-48 object-cover rounded-t-lg mb-4" src="https://picsum.photos/seed/retro/600/400" alt="Retro Image">
  <div class="text-gray-700 dark:text-gray-300">
    <h2 class="text-xl font-bold mb-2">Retro Media Title</h2>
    <p class="text-base mb-4">This is a description of the retro media component, evoking a sense of nostalgia with its vintage design and colors.</p>
    <div class="flex items-center text-sm">
      <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar">
      <span>By John Doe</span>
      <span class="ml-auto">Posted on 1995-10-26</span>
    </div>
  </div>
</div>

관련 구성 요소

미디어 컴포넌트 컴포넌트

복잡하고 반응이 빠른 다크 모드 호환 소셜 미디어 미디어 구성 요소로, 생생한 색상을 사용하는 Glassmorphism 스타일을 사용합니다.

열다

미디어 컴포넌트 컴포넌트

블로그 콘텐츠 소비를 위한 복잡하고 반응이 빠른 미디어 구성 요소로, 단색 색 구성표로 어두운 모드로 스타일링됩니다. 여기에는 이미지, 제목, 설명 및 작성자 아바타가 포함됩니다.

열다

미디어 컴포넌트 컴포넌트

Tailwind CSS로 디자인된 매력적인 애니메이션과 함께 마이크로 인터랙션을 특징으로 하는 반응형 미디어 구성 요소입니다. 어두운 테마를 지원하며 자리 표시자 이미지와 아바타를 포함합니다.

열다