タブ | Code Components Hub

タブコンポーネント

ソーシャルメディア用のブルータリストスタイルのタブコンポーネントで、補色と複雑でレスポンシブなデザイン(ダークテーマのサポートを含む)を備えています。

                <div class="font-mono bg-amber-200 text-purple-900 min-h-screen p-8 dark:bg-purple-900 dark:text-amber-200">
  <div class="max-w-4xl mx-auto border-4 border-purple-900 dark:border-amber-200">
    <!-- Brutalist Header/Title -->
    <h1 class="text-5xl font-extrabold p-4 bg-purple-900 text-amber-200 text-center uppercase tracking-widest border-b-4 border-amber-200 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900">
      Social Feed
    </h1>

    <!-- Tabs Navigation -->
    <div class="flex border-b-4 border-purple-900 dark:border-amber-200">
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Latest</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Popular</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase bg-amber-300 hover:bg-amber-400 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Friends</span>
      </button>
    </div>

    <!-- Tab Content Area -->
    <div class="p-4 space-y-8">
      <!-- Example Post 1 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@PixelPunk</p>
            <p class="text-lg">2 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just dropped my new brutalist-inspired digital art piece! Check it out and tell me what you think. #BrutalArt #DigitalDesign #NewWork
        </p>
        <img src="https://picsum.photos/id/1040/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">1.2K Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>

      <!-- Example Post 2 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@CodeCrusher</p>
            <p class="text-lg">4 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just finished coding a new brutalist UI for my dev portfolio. Loving the raw, unrefined aesthetic! #WebDev #BrutalistUI #CodingLife
        </p>
        <img src="https://picsum.photos/id/1043/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">987 Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Neumorphism Tabs コンポーネント

ダッシュボード UI 用のニューモーフィックタブコンポーネントで、グレースケールの配色、レスポンシブデザイン、HTML と Tailwind CSS のみを使用したダークテーマのサポートが特徴です。

プレビューを開く

                <div class="p-4 bg-gray-200 dark:bg-gray-800 min-h-screen flex items-center justify-center">
  <div class="w-full max-w-2xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-6">
    <div class="flex space-x-4 mb-6">
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Overview
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-800 dark:text-white text-sm font-medium 
                     bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Analytics
      </button>
      <button class="flex-1 py-3 px-4 rounded-lg text-gray-700 dark:text-gray-300 text-sm font-medium 
                     shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark 
                     hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark 
                     focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50
                     transition ease-in-out duration-300">
        Reports
      </button>
    </div>

    <div class="p-6 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <!-- Content for the active tab -->
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Analytics Dashboard</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Card 1 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">1,234,567</p>
        </div>
        <!-- Card 2 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Page Views</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">5,678,901</p>
        </div>
        <!-- Card 3 -->
        <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <h4 class="text-md font-medium text-gray-700 dark:text-gray-200 mb-2">Bounce Rate</h4>
          <p class="text-2xl font-bold text-gray-900 dark:text-white">32.5%</p>
        </div>
      </div>
    </div>

  </div>
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1a1a1a, -6px -6px 12px #4a4a4a;
    }
    .shadow-neumorphic-inset-light {
      box-shadow: inset 6px 6px 12px #b0b0b0, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #4a4a4a;
    }
  </style>
</div>

タブコンポーネント

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

プレビューを開く

                <div class="max-w-4xl mx-auto my-8">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700">
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Recent Posts
      </button>
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Categories
      </button>
      <button class="flex-1 py-4 px-6 text-center text-sm font-medium text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none focus:text-blue-600 dark:focus:text-blue-400 border-b-2 border-transparent hover:border-blue-500 dark:hover:border-blue-400 focus:border-blue-500 dark:focus:border-blue-400 transition duration-300 ease-in-out">
        Authors
      </button>
    </div>
    <div class="p-6">
      <!-- Content for 'Recent Posts' tab -->
      <div class="space-y-4">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">A Guide to Responsive Web Design</h3>
        <p class="text-gray-700 dark:text-gray-300">Learn the fundamentals of creating websites that adapt seamlessly to various screen sizes and devices.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
          <img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <span>John Doe</span>
          <span class="mx-2">•</span>
          <span>October 26, 2023</span>
        </div>
        <hr class="border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Understanding CSS Grid Layout</h3>
        <p class="text-gray-700 dark:text-gray-300">Explore the power and flexibility of CSS Grid for building complex two-dimensional layouts.</p>
        <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
          <img class="w-8 h-8 rounded-full mr-2" src="https://www.randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
          <span>Jane Smith</span>
          <span class="mx-2">•</span>
          <span>October 20, 2023</span>
        </div>
      </div>

      <!-- Content for 'Categories' tab (hidden by default, would be shown with JS) -->
      <!-- <div class="space-y-4 hidden">
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Technology</li>
          <li>Programming</li>
          <li>Design</li>
          <li>Lifestyle</li>
        </ul>
      </div> -->

      <!-- Content for 'Authors' tab (hidden by default, would be shown with JS) -->
      <!-- <div class="space-y-4 hidden">
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">David Lee</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Content Creator</p>
          </div>
        </div>
        <div class="flex items-center space-x-4">
          <img class="w-12 h-12 rounded-full" src="https://www.randomuser.me/api/portraits/women/65.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">Sarah Chen</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Tech Enthusiast</p>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</div>

タブコンポーネント

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

プレビューを開く

                <div class="bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-950 p-8 rounded-xl shadow-2xl m-4
            font-sans text-gray-800 dark:text-gray-200">

  <div class="flex border-b-2 border-gray-300 dark:border-gray-700 mb-6 space-x-2">
    <!-- Tab 1 Button -->
    <input type="radio" name="tabs" id="tab1" class="hidden" checked>
    <label for="tab1" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Company Profile
    </label>

    <!-- Tab 2 Button -->
    <input type="radio" name="tabs" id="tab2" class="hidden">
    <label for="tab2" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Our Services
    </label>

    <!-- Tab 3 Button -->
    <input type="radio" name="tabs" id="tab3" class="hidden">
    <label for="tab3" class="relative block cursor-pointer px-6 py-3 text-lg font-semibold
                          text-gray-600 dark:text-gray-400
                          hover:text-amber-700 hover:dark:text-amber-300
                          transition-colors duration-300
                          peer-checked:text-amber-800 peer-checked:dark:text-white
                          peer-checked:bg-gradient-to-b peer-checked:from-white peer-checked:via-gray-100 peer-checked:to-gray-200
                          peer-checked:dark:from-gray-700 peer-checked:dark:via-gray-800 peer-checked:dark:to-gray-900
                          peer-checked:border-x peer-checked:border-t peer-checked:border-gray-300 peer-checked:dark:border-gray-700
                          rounded-tl-lg rounded-tr-lg
                          before:absolute before:bottom-0 before:left-0 before:right-0 before:h-1 before:bg-transparent
                          peer-checked:before:bg-amber-500 peer-checked:before:dark:bg-amber-400
                          peer-checked:before:shadow-[0_0_15px_rgba(251,191,36,0.6)]">
      Contact Us
    </label>
  </div>

  <!-- Tab Content 1 -->
  <div role="tabpanel" aria-labelledby="tab1" class="tab-content" id="content1">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">About Our Company</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      Founded in 2005, we have grown into a leading innovator in sustainable energy solutions.
      Our commitment to excellence and customer satisfaction drives us to deliver cutting-edge technologies.
      We believe in a future powered by clean, renewable resources, and we are dedicated to making that a reality.
    </p>
    <img src="https://picsum.photos/id/150/800/400" alt="Modern Office Building" class="rounded-lg shadow-xl mb-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Mission</h3>
        <p class="text-gray-600 dark:text-gray-400">To empower businesses and communities with reliable,
          eco-friendly energy alternatives, fostering a greener planet for generations to come.</p>
      </div>
      <div>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Vision</h3>
        <p class="text-gray-600 dark:text-gray-400">To be the global leader in renewable energy, recognized for our
          innovation, integrity, and significant positive impact on the environment.</p>
      </div>
    </div>
  </div>

  <!-- Tab Content 2 -->
  <div role="tabpanel" aria-labelledby="tab2" class="tab-content hidden" id="content2">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Comprehensive Service Portfolio</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We offer a wide array of services designed to meet the diverse needs of our clients,
      from initial consultation and system design to installation and ongoing maintenance.
      Our solutions are tailored to maximize efficiency and deliver sustainable results.
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Solar Solutions</h3>
        <p class="text-gray-600 dark:text-gray-400">Residential and commercial solar panel installation and maintenance.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Wind Energy Consulting</h3>
        <p class="text-gray-600 dark:text-gray-400">Site assessment, turbine selection, and project management.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700
                  hover:shadow-xl transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Energy Audits</h3>
        <p class="text-gray-600 dark:text-gray-400">Thorough analysis to identify energy inefficiencies and recommend improvements.</p>
      </div>
    </div>
    <img src="https://picsum.photos/id/152/800/400" alt="Renewable Energy Solutions" class="rounded-lg shadow-xl">
  </div>

  <!-- Tab Content 3 -->
  <div role="tabpanel" aria-labelledby="tab3" class="tab-content hidden" id="content3">
    <h2 class="text-3xl font-bold text-amber-700 dark:text-amber-300 mb-4
               drop-shadow-lg">Connect With Us</h2>
    <p class="mb-6 leading-relaxed text-gray-700 dark:text-gray-300">
      We are always eager to hear from you. Whether you have a question, a project inquiry, or just want to chat,
      our team is ready to assist. Reach out to us through the methods below!
    </p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Our Office</h3>
        <p class="text-gray-600 dark:text-gray-400">123 Eco-Friendly Lane, Green City, GC 12345</p>
        <p class="text-gray-600 dark:text-gray-400">United States</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md
                  border border-gray-200 dark:border-gray-700">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-3">Get in Touch</h3>
        <p class="text-gray-600 dark:text-gray-400">Email: <a href="mailto:[email protected]"
                                                              class="text-amber-600 dark:text-amber-400 hover:underline">[email protected]</a></p>
        <p class="text-gray-600 dark:text-gray-400">Phone: (123) 456-7890</p>
      </div>
    </div>
    <div class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Service Representative"
           class="w-20 h-20 rounded-full shadow-lg border-4 border-amber-400 dark:border-amber-500">
      <div>
        <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe, Lead Representative</p>
        <p class="text-gray-600 dark:text-gray-400">"We're here to help you power your future."</p>
      </div>
    </div>
  </div>

</div>

<style>
  /* Base styling for the tab content - hidden by default */
  .tab-content {
    display: none;
  }

  /* Show the content associated with the checked radio button */
  input[name="tabs"]:checked + label + .tab-content {
    display: block;
  }

  /* If using sibling combinator for tab content not directly adjacent */
  input#tab1:checked ~ #content1,
  input#tab2:checked ~ #content2,
  input#tab3:checked ~ #content3 {
    display: block;
  }
</style>

Glassmorphism タブコンポーネント

ポートフォリオ用のシンプルなGlassmorphismタブコンポーネントで、レスポンシブデザインとダークテーマがサポートされています。鮮やかな配色を使用。

プレビューを開く

                <div class="flex justify-center items-center h-screen bg-gray-200 dark:bg-gray-900 p-8">
  <div class="w-full max-w-md bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-xl">
    <div class="flex border-b border-gray-200 dark:border-gray-700">
      <button class="flex-1 py-2 px-4 text-center text-lg font-medium text-indigo-700 dark:text-indigo-300 border-b-2 border-indigo-500 dark:border-indigo-400 focus:outline-none">Projects</button>
      <button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">About</button>
      <button class="flex-1 py-2 px-4 text-center text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-300 focus:outline-none">Contact</button>
    </div>
    <div class="mt-6 text-gray-700 dark:text-gray-300">
      <!-- Tab content goes here -->
      <p>This is the content for the Projects tab. You can replace this with your actual portfolio items.</p>
    </div>
  </div>
</div>

Glassmorphism タブコンポーネント

ソーシャルメディアインターフェース用に設計された、glassmorphismスタイルのレスポンシブタブコンポーネント。グレースケールの配色でTailwind CSSを使用したすりガラスのような効果が特徴です。このデザインはダークモードをサポートしています。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800">
    <div class="bg-gray-900 bg-opacity-50 backdrop-blur-lg rounded-lg shadow-lg p-5 w-full max-w-md">
        <h2 class="text-white text-2xl font-semibold mb-4 text-center">Social Media Tabs</h2>
        <div class="flex justify-around mb-4">
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab1">Tab 1</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab2">Tab 2</button>
            <button class="py-2 px-4 rounded-lg text-gray-300 font-medium hover:bg-gray-700 dark:hover:bg-gray-600 transition duration-300" id="tab3">Tab 3</button>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div id="content-tab1" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 1 Content</h3>
                <p>Welcome to Tab 1! This is where content for the first tab goes.</p>
                <img src="https://picsum.photos/200?random=1" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 1</span>
                </div>
            </div>
            <div id="content-tab2" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 2 Content</h3>
                <p>Welcome to Tab 2! This is where content for the second tab goes.</p>
                <img src="https://picsum.photos/200?random=2" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 2</span>
                </div>
            </div>
            <div id="content-tab3" class="tab-content text-white hidden">
                <h3 class="font-bold text-lg">Tab 3 Content</h3>
                <p>Welcome to Tab 3! This is where content for the third tab goes.</p>
                <img src="https://picsum.photos/200?random=3" alt="Random Image" class="rounded-md mt-2" />
                <div class="flex items-center mt-2">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                    <span class="text-gray-300">User 3</span>
                </div>
            </div>
        </div>
    </div>
</div>

タブコンポーネント

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

プレビューを開く

                <div class="max-w-3xl mx-auto p-4">
    <h2 class="text-2xl font-semibold mb-4">Product Categories</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
        <div class="flex border-b border-gray-200 dark:border-gray-600">
            <button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                <span>Electronics</span>
            </button>
            <button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                <span>Clothing</span>
            </button>
            <button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                <span>Home & Kitchen</span>
            </button>
        </div>
        <div class="p-4">
            <div class="tab-content hidden">
                <h3 class="text-xl font-semibold">Electronics</h3>
                <img src="https://picsum.photos/300/200?random=1" alt="Electronics" class="rounded-lg mb-4">
                <p class="text-gray-600 dark:text-gray-400">Latest gadgets and devices for your tech needs.</p>
            </div>
            <div class="tab-content hidden">
                <h3 class="text-xl font-semibold">Clothing</h3>
                <img src="https://picsum.photos/300/200?random=2" alt="Clothing" class="rounded-lg mb-4">
                <p class="text-gray-600 dark:text-gray-400">Trendy and comfortable apparel for all occasions.</p>
            </div>
            <div class="tab-content hidden">
                <h3 class="text-xl font-semibold">Home & Kitchen</h3>
                <img src="https://picsum.photos/300/200?random=3" alt="Home & Kitchen" class="rounded-lg mb-4">
                <p class="text-gray-600 dark:text-gray-400">Quality products to enhance your living spaces.</p>
            </div>
        </div>
    </div>
</div>

タブコンポーネント

ビジネス/企業Webサイト向けのマイクロインタラクションを備えたレスポンシブタブコンポーネントで、補色とダークモードのサポートを備えています。

プレビューを開く

                <div class="max-w-4xl mx-auto my-10 p-5">
  <div class="border-b border-gray-300 dark:border-gray-700">
    <nav class="flex space-x-4" aria-label="Tabs">
      <button class="tab-button active dark:bg-gray-800 dark:text-white bg-blue-500 text-white rounded-lg px-4 py-2 transition duration-200 ease-in-out" aria-current="page">Tab 1</button>
      <button class="tab-button hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200 ease-in-out rounded-lg px-4 py-2">Tab 2</button>
      <button class="tab-button hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200 ease-in-out rounded-lg px-4 py-2">Tab 3</button>
    </nav>
  </div>

  <div class="tab-content mt-4 p-5 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
    <div id="tab-1" class="content active">
      <h2 class="text-xl font-semibold">Content for Tab 1</h2>
      <p>This tab contains information relevant to the first topic.</p>
      <img src="https://picsum.photos/400/200" alt="Random image" class="mt-3 rounded shadow" />
    </div>
    <div id="tab-2" class="content hidden">
      <h2 class="text-xl font-semibold">Content for Tab 2</h2>
      <p>This tab contains information relevant to the second topic.</p>
      <img src="https://picsum.photos/400/200" alt="Random image" class="mt-3 rounded shadow" />
    </div>
    <div id="tab-3" class="content hidden">
      <h2 class="text-xl font-semibold">Content for Tab 3</h2>
      <p>This tab contains information relevant to the third topic.</p>
      <img src="https://picsum.photos/400/200" alt="Random image" class="mt-3 rounded shadow" />
    </div>
  </div>
</div>

<style>
  .tab-button.active {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  .tab-button:hover {
    transform: scale(1.05);
  }

  .content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }

  .content.active {
    opacity: 1;
    transform: translateY(0);
  }

  .content.hidden {
    display: none;
  }
</style>

タブコンポーネント

ソーシャルメディアインターフェース用に設計されたレスポンシブタブコンポーネントで、マイクロインタラクションとダークテーマが特徴です。このコンポーネントには、複数のインタラクティブ要素が含まれており、Tailwind CSS を使用します。

プレビューを開く

                <div class="bg-gray-900 dark:bg-gray-800 p-4 rounded-lg">
    <div class="flex space-x-4 border-b border-gray-700">
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600" aria-selected="true">Tab 1</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 2</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 3</button>
        <button class="tab-button text-gray-400 dark:text-gray-300 focus:outline-none py-2 px-4 rounded transition duration-200 hover:bg-gray-700 dark:hover:bg-gray-600">Tab 4</button>
    </div>
    <div class="mt-4">
        <div class="tab-content py-6 px-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-md">
            <h2 class="text-lg font-semibold text-white">Tab 1 Content</h2>
            <p class="text-gray-300 dark:text-gray-200">This is the content for Tab 1. It could include various elements like images, text, and interactive features.</p>
            <div class="mt-4">
                <img src="https://picsum.photos/200/100" alt="Sample Image" class="rounded mb-2">
                <div class="flex items-center space-x-2">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
                    <span class="text-gray-200 dark:text-gray-300">User Name</span>
                </div>
            </div>
        </div>
    </div>
</div>

Glassyグレースケールタブ

Glassmorphism Grayscale Simple Dashboard Tabs コンポーネント (ダークモード対応)

プレビューを開く

                <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>

カテゴリ

タブ