CCHub Logo CCHub Tailwind Collection
コンポーネント タブ マテリアル デザイン タブ

マテリアル デザイン タブ

マテリアルデザインスタイル、レスポンシブエフェクト、および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>

関連コンポーネント

タブコンポーネント - ジョブ/キャリア

マテリアルデザインの美学とパステルカラーの配色を備えたレスポンシブタブコンポーネントで、求人掲示板やキャリアプラットフォームに適しています。ダークモードのサポートが含まれています。

開ける

タブコンポーネント

マテリアルデザインのスタイル設定、単色の配色、ダークテーマのサポートを備えたレスポンシブタブコンポーネントで、コンテンツの多いWebサイト向けにTailwind CSSで構築されています。

開ける

タブコンポーネント

スキューモーフィックデザイン、類似の配色、ダークテーマのサポートを備えたレスポンシブタブコンポーネントで、プロフェッショナルなビジネスWebサイトに適しています。このコンポーネントは、スタイル設定に Tailwind CSS を使用し、JavaScript は含まれていません。

開ける