Content Display Components 컴포넌트
마이크로 인터랙션, 반응형 디자인, 어두운 테마 지원을 갖춘 단순하고 생생한 콘텐츠 표시 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.
HTML 코드
<div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
<div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
<div class="relative">
<img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
<div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
Article
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
The Future of Web Development
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
</div>
</div>
<a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
Read More
<svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
</div>
</div>
</div>