Компонент вкладок
Адаптивный компонент вкладок, разработанный для темного режима с использованием Tailwind CSS. В нем есть различные вкладки, на которые пользователи могут нажимать, чтобы отобразить контент, а также изображения-заполнители и аватары.
HTML-код
<div class="bg-gray-800 text-white rounded-lg shadow-md">
<div class="flex border-b border-gray-700">
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab1')">Tab 1</button>
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab2')">Tab 2</button>
<button class="py-2 px-4 text-sm font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600" onclick="showTab('tab3')">Tab 3</button>
</div>
<div id="tab1" class="p-4">
<h2 class="text-lg font-semibold">Tab 1 Content</h2>
<p>Content for tab 1 goes here.</p>
<img src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>John Doe</span>
</div>
</div>
<div id="tab2" class="hidden p-4">
<h2 class="text-lg font-semibold">Tab 2 Content</h2>
<p>Content for tab 2 goes here.</p>
<img src="https://picsum.photos/400/200?random=2" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Jane Doe</span>
</div>
</div>
<div id="tab3" class="hidden p-4">
<h2 class="text-lg font-semibold">Tab 3 Content</h2>
<p>Content for tab 3 goes here.</p>
<img src="https://picsum.photos/400/200?random=3" alt="Placeholder Image" class="rounded-md mt-2">
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
<span>Mike Smith</span>
</div>
</div>
</div>Связанные компоненты
Компонент скевоморфных вкладок
Адаптивный компонент вкладок, стилизованный под скевоморфизм, использующий Tailwind CSS для имитации реальных элементов дизайна. Он включает в себя поддержку темной темы и изображения-заполнители.
Компонент вкладок
Минималистичный и яркий компонент Tabs для электронной коммерции с умеренной сложностью, адаптивным дизайном и поддержкой темных тем, реализованный с помощью Tailwind CSS и HTML.
Вкладки «Дизайн материалов»
Компонент Tabs со стилем Material Design, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS, без JavaScript.