탭 구성 요소
머티리얼 디자인 스타일, 단색 색 구성표 및 어두운 테마 지원을 제공하는 반응형 탭 구성 요소로, 콘텐츠가 많은 웹 사이트를 위해 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>관련 구성 요소
산업VibrantTabs
복잡하고 생동감 넘치는 산업 테마의 탭 구성 요소로, 다중 공급업체 마켓플레이스에 적합하며, 노출된 요소, 원료 미학 및 높은 채도의 색상을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
Glassmorphism Tabs 구성 요소
소셜 미디어 인터페이스를 위해 설계된 glassmorphism 스타일의 반응형 탭 구성 요소입니다. 회색조 색 구성표와 함께 Tailwind CSS를 사용하여 젖빛 유리와 같은 효과가 특징입니다. 디자인은 다크 모드를 지원합니다.