Content Display Components 컴포넌트
마이크로 인터랙션, 그레이스케일 색상 및 중간 정도의 복잡성을 가진 Content Display Component로, 반응형 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.
HTML 코드
<div class="p-8 bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
<div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Article Card 1 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
<img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum1/600/400" alt="Article Thumbnail">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">Project Alpha: A Deep Dive</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore the intricacies of Project Alpha, a landmark achievement in innovative design and engineering.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 7 min</span>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
Learn More
<svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<!-- Article Card 2 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
<img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum2/600/400" alt="Article Thumbnail">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">The Future of UI/UX: Trends and Predictions</h3>
<p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Dive into the exciting world of UI/UX and discover what lies ahead for cutting-edge design.</p>
<div class="flex justify-between items-center">
<span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 10 min</span>
<a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
Learn More
<svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" 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="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<!-- Testimonial Card 1 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 p-6 dark:bg-gray-800 dark:hover:bg-gray-700 md:col-span-2 flex items-start space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">"This component embodies the perfect blend of subtle animations and clean aesthetics. It