Interactive Components 구성 요소
3D 인터랙티브 컴포넌트로, 깊이 효과, 반응형 디자인, 어두운 테마 지원 기능이 있는 카드를 선보입니다.
HTML 코드
<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
<div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
<img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
</div>
<div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
<img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
</div>
<div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
<img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
</div>
</div>관련 구성 요소
Interactive Components 구성 요소
Skeuomorphism 디자인, 아날로그 색 구성표 및 블로그/콘텐츠 목적을 위한 중간 수준의 복잡성을 가진 대화형 구성 요소 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트 코드가 없습니다.