블로그 기능 구성 요소
기능적 구성 요소 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>관련 구성 요소
Glassmorphic 뮤직 플레이어 컨트롤
세피아/브라운 톤의 glassmorphic 뮤직 플레이어 제어 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과가 특징입니다. 반응이 빠르고 다크 모드를 지원하며 음악 스트리밍 및 오디오 플랫폼에 적합합니다.
기능적 구성 요소 구성 요소 - Brutalism Style
Tailwind CSS를 사용하여 브루탈리즘 스타일로 설계된 기능적 웹 구성 요소입니다. 이 구성 요소는 고대비, 반응형 효과 및 어두운 테마 지원을 갖춘 대담한 레이아웃을 특징으로 합니다. 여기에는 시각적 호소력을 위한 자리 표시자 이미지와 아바타가 포함되어 있습니다.
Neumorphism 기능 구성 요소
Tailwind CSS로 빌드된 Neumorphism 디자인 스타일을 따르는 웹 구성 요소입니다. 순전히 CSS를 통해 반응형 디자인과 다크 모드를 지원합니다.