CCHub Logo CCHub Tailwind Collection
コンポーネント タブ タブコンポーネント

タブコンポーネント

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>

関連コンポーネント

ArtDecoTabsコンポーネント

アールデコ調の美学を備えた複雑で応答性の高いタブコンポーネントは、写真ポートフォリオ用に設計されており、企業のブルートーンとダークモードのサポートを備えています。

開ける

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

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

開ける

インダストリアルVibrantTabs

マルチベンダーマーケットプレイスに適した、複雑で活気に満ちた産業をテーマにしたタブコンポーネントで、露出した要素、原材料の美学、高彩度の色が特徴です。ダークモードのサポートにより完全にレスポンシブ。

開ける