탭 구성 요소
머티리얼 디자인 스타일, 단색 색 구성표 및 어두운 테마 지원을 제공하는 반응형 탭 구성 요소로, 콘텐츠가 많은 웹 사이트를 위해 Tailwind CSS로 구축되었습니다.
HTML 코드
<div class="max-w-4xl mx-auto my-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex border-b border-gray-200 dark:border-gray-700">
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Recent Posts
</button>
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Categories
</button>
<button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
Authors
</button>
</div>
<div class="p-6">
<!-- Content for 'Recent Posts' tab -->
<div class="space-y-4">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">A Guide to Responsive Web Design</h3>
<p class="text-gray-700 dark:text-gray-300">Learn the fundamentals of creating websites that adapt seamlessly to various screen sizes and devices.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<span>John Doe</span>
<span class="mx-2">•</span>
<span>October 26, 2023</span>
</div>
<hr class="border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">Understanding CSS Grid Layout</h3>
<p class="text-gray-700 dark:text-gray-300">Explore the power and flexibility of CSS Grid for building complex two-dimensional layouts.</p>
<div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
<img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
<span>Jane Smith</span>
<span class="mx-2">•</span>
<span>October 20, 2023</span>
</div>
</div>
<!-- Content for 'Categories' tab (hidden by default, would be shown with JS) -->
<!-- <div class="space-y-4 hidden">
<ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
<li>Technology</li>
<li>Programming</li>
<li>Design</li>
<li>Lifestyle</li>
</ul>
</div> -->
<!-- Content for 'Authors' tab (hidden by default, would be shown with JS) -->
<!-- <div class="space-y-4 hidden">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">David Lee</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
</div>
</div>
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/women/65.jpg" alt="Author Avatar">
<div>
<p class="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Tech Enthusiast</p>
</div>
</div>
</div> -->
</div>
</div>
</div>