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>

関連コンポーネント

スキューモーフィック タブ コンポーネント

Tailwind CSSを利用して現実世界のデザイン要素を模倣し、スキューモーフィズムでスタイル化されたレスポンシブタブコンポーネント。これには、ダークテーマのサポートとプレースホルダー画像が含まれます。

開ける

タブコンポーネント

パステルカラースキームとTailwind CSSを使用して、eコマースアプリケーション用のスキューモーフィックスタイルで設計されたレスポンシブタブコンポーネント。

開ける

タブコンポーネント

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

開ける