컨테이너 구성 요소
비즈니스/기업 웹 사이트에 적합한 3D 스타일의 컨테이너 구성 요소로, 생생한 색상과 대화형 요소, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transform transition-transform duration-300 hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://i.pravatar.cc/150?img=5" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-vibrant-600 shadow-md">
<h2 class="text-xl font-bold text-vibrant-600 dark:text-vibrant-300 ml-4">Business Name</h2>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4">This container is designed to showcase important information while maintaining a 3D effect that engages users.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
<img src="https://picsum.photos/200/100?random=1" alt="Image 1" class="w-full h-auto rounded-md mb-2">
<h3 class="font-semibold text-white">Feature One</h3>
<p class="text-white">Description of feature one with engaging content.</p>
</div>
<div class="bg-vibrant-500 dark:bg-vibrant-700 p-4 rounded-lg shadow-md hover:shadow-xl transform transition-transform duration-300">
<img src="https://picsum.photos/200/100?random=2" alt="Image 2" class="w-full h-auto rounded-md mb-2">
<h3 class="font-semibold text-white">Feature Two</h3>
<p class="text-white">Description of feature two with engaging content.</p>
</div>
</div>
</div>