Компоненты Вкладки Вкладки «Дизайн материалов»

Вкладки «Дизайн материалов»

Компонент Tabs со стилем Material Design, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS, без JavaScript.

Предварительный просмотр

HTML-код

<div class="material-tabs">
  <div class="tab-header">
    <div class="tab-button active">Tab 1</div>
    <div class="tab-button">Tab 2</div>
    <div class="tab-button">Tab 3</div>
  </div>
  <div class="tab-content active">
    <h2>Content for Tab 1</h2>
    <p>This is the content for the first tab. It uses Material Design principles for layout and appearance.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for the second tab.</p>
  </div>
  <div class="tab-content">
    <h2>Content for Tab 3</h2>
    <p>This is the content for the third tab.</p>
  </div>
</div>

Связанные компоненты

ОрганическийВкладкиКомпонент

Простой, отзывчивый компонент вкладок с органичным дизайном, вдохновленным природой, и фирменной синей цветовой гаммой, подходящий для музыкальных/аудио платформ. Включает поддержку темного режима.

Открытый

ПромышленныеVibrantTabs

Сложный, яркий компонент вкладок на индустриальную тематику, подходящий для рынка с несколькими поставщиками, с открытыми элементами, эстетикой сырья и высокой насыщенностью цветов. Полностью адаптивный с поддержкой темного режима.

Открытый

Компонент «Нейроморфные вкладки»

Компонент нейроморфных вкладок в оттенках серого для содержимого блога с адаптивным дизайном и поддержкой темного режима.

Открытый