블로그 기능 구성 요소
기능적 구성 요소 3D 디자인의 구성 요소, 보색 구성표, 블로그의 중간 정도의 복잡성, 어두운 테마 지원으로 반응 형. JS는 없고 HTML과 Tailwind만 있습니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
From the Blog
</h2>
<p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
Explore our latest articles and insights.
</p>
</div>
<div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Article
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
Boost your conversion rate
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Roel Aufderhar</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Roel Aufderhar
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Video
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
How to use search engine optimization to drive traffic to your site
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Brenna Goyette</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Brenna Goyette
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
<div class="flex-shrink-0">
<img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
</div>
<div class="flex-1 p-6 flex flex-col justify-between">
<div class="flex-1">
<p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
<a href="#" class="hover:underline">
Case Study
</a>
</p>
<a href="#" class="block mt-2">
<p class="text-xl font-semibold text-gray-900 dark:text-white">
Improve your customer experience
</p>
<p class="mt-3 text-base text-gray-500 dark:text-gray-400">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
</p>
</a>
</div>
<div class="mt-6 flex items-center">
<div class="flex-shrink-0">
<a href="#">
<span class="sr-only">Daniela Metz</span>
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
</a>
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-900 dark:text-white">
<a href="#" class="hover:underline">
Daniela Metz
</a>
</p>
<div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
<time datetime="2020-03-16">Mar 16, 2020</time>
<span aria-hidden="true">
·
</span>
<span>
6 min read
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
아르 데코 퍼플 문서 구성 요소
아르데코 디자인 테마가 있는 중간 정도의 복잡성 문서/위키 구성 요소로, 보라색/보라색 색상 스펙트럼을 사용하여 기하학적 패턴과 고급스러운 스타일을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
기능 컴포넌트 컴포넌트 - 다크 모드 UI
다크 모드와 어스 톤으로 설계된 반응형 소셜 미디어 구성 요소로, 소셜 네트워킹 인터페이스에 적합합니다. 사용자 아바타, 게시물 콘텐츠 및 상호 작용 버튼을 제공합니다.