스큐어모피즘 카드 컴포넌트
Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 스큐어모피즘 스타일 카드 컴포넌트입니다. 여기에는 자리 표시자 이미지와 아바타가 포함됩니다.
HTML 코드
<div class="dark:bg-gray-900 dark:text-white bg-gray-200 text-gray-800 p-6 rounded-lg shadow-xl dark:shadow-2xl max-w-sm mx-auto my-8">
<div class="relative">
<img class="w-full h-48 object-cover rounded-md shadow-md transform transition duration-500 hover:scale-105" src="https://picsum.photos/400/300" alt="Placeholder image">
<div class="absolute bottom-0 right-0 -mb-4 mr-4">
<img class="w-10 h-10 rounded-full border-2 border-white shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
<div class="mt-6">
<h2 class="text-xl font-bold mb-2 dark:text-white text-gray-800">Skeuomorphic Card</h2>
<p class="text-gray-700 dark:text-gray-300">
This is a Skeuomorphism-inspired card with responsive effects and dark theme support utilizing Tailwind CSS.
</p>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-sm text-gray-600 dark:text-gray-400">Posted on October 26, 2023</span>
<button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full shadow-md hover:shadow-lg transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">
Read More
</button>
</div>
</div>