레이아웃 구성 요소
블로그 및 콘텐츠 소비를 위해 설계된 복잡한 레이아웃 구성 요소로, 미시적 상호 작용과 보색 구성표를 특징으로 합니다. 여기에는 다양한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
<header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
<h1 class="text-white text-2xl font-bold">My Blog</h1>
<nav class="mt-2">
<ul class="flex space-x-4">
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
</ul>
</nav>
</header>
<main class="py-10 px-4 sm:px-8 lg:px-16">
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
</section>
</main>
<footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
<p>© 2023 My Blog</p>
</footer>
</div>