소셜 구성 요소 구성 요소
다크 모드 지원을 포함하여 산업적 미학과 가을 색 구성표를 갖춘 뉴스/저널리즘 콘텐츠를 위한 간단하고 반응이 빠른 소셜 미디어 카드입니다.
HTML 코드
<div class="bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8 font-sans antialiased text-stone-800 dark:text-stone-200">
<div class="max-w-xs mx-auto border-2 border-stone-400 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-50 dark:bg-stone-800 transition-colors duration-300">
<div class="relative">
<img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/250?random=1" alt="News Article Cover">
<span class="absolute top-2 left-2 bg-amber-700 text-amber-50 text-xs px-2 py-1 rounded font-mono uppercase tracking-wide">News</span>
</div>
<div class="p-4">
<h3 class="text-lg font-bold text-amber-800 dark:text-amber-500 mb-2 leading-tight">Headline Connects Community Leaders</h3>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-3">
Local officials and community organizers gathered today to discuss new initiatives aimed at fostering stronger neighborhood bonds and addressing pressing local issues.
</p>
<div class="flex items-center justify-between text-stone-500 dark:text-stone-400 text-xs">
<div class="flex items-center space-x-2">
<img class="w-6 h-6 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
<span class="font-medium">John Doe</span>
</div>
<span>Oct 26, 2023</span>
</div>
</div>
</div>
</div>