СтеклянныеОттенки серого
Glassmorphism Grayscale Простые вкладки приборной панели Компонент с поддержкой темного режима
HTML-код
<div class="p-4 bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg">
<div class="border-b border-gray-200 dark:border-gray-700">
<nav class="-mb-0.5 flex space-x-6" aria-label="Tabs">
<a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">
Dashboard
</a>
<a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-gray-500 text-sm font-medium text-gray-600 dark:text-gray-300 dark:border-gray-400">
Reports
</a>
<a href="#" class="py-2 px-1 inline-flex items-center border-b-2 border-transparent text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600">
Settings
</a>
</nav>
</div>
<div class="mt-4">
<!-- Tab content goes here -->
<p class="text-gray-700 dark:text-gray-300">Content for the selected tab.</p>
</div>
</div>Связанные компоненты
Компонент вкладок
Компонент Responsive Tabs с земляными тонами и микровзаимодействиями для бизнес-сайтов, поддерживающий темный режим с использованием Tailwind CSS. Использует только классы HTML и Tailwind.
Компонент вкладок
Адаптивный компонент Tabs со стилем Material Design, монохроматической цветовой схемой и поддержкой темной темы, созданный с помощью Tailwind CSS для веб-сайтов с большим количеством контента.
Компонент вкладок
Адаптивный компонент вкладок со скевоморфным дизайном, аналогичной цветовой схемой и поддержкой темной темы, подходит для профессиональных бизнес-сайтов. Компонент использует Tailwind CSS для стилизации и не включает JavaScript.