검색 구성 요소

카테고리

탭

동일한 영역 내에서 다른 콘텐츠 간 전환

탭 구성 요소

머티리얼 디자인 스타일, 단색 색 구성표 및 어두운 테마 지원을 제공하는 반응형 탭 구성 요소로, 콘텐츠가 많은 웹 사이트를 위해 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>

탭 구성 요소

스큐어모픽 디자인, 아날로그 색 구성표 및 어두운 테마 지원을 갖춘 반응형 탭 구성 요소는 전문 비즈니스 웹사이트에 적합합니다. 구성 요소는 스타일링을 위해 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 Tabs 구성 요소

Simple Glassmorphism Tabs Portfolio용 구성 요소, 반응형 디자인과 어두운 테마 지원. 생생한 색 구성표를 사용합니다.

열다 미리 보기

                <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 Tabs 구성 요소

소셜 미디어 인터페이스를 위해 설계된 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를 사용합니다.

열다 미리 보기

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

탭 구성 요소

비즈니스/기업 웹 사이트를 위한 마이크로 상호 작용이 있는 반응형 탭 구성 요소로, 보색과 다크 모드 지원을 제공합니다.

열다 미리 보기

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

GlassyGrayscale탭

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>

탭 구성 요소

Tailwind CSS 및 HTML을 사용하여 구현된 적당한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 전자 상거래를 위한 미니멀하고 생생한 탭 구성 요소입니다.

열다 미리 보기

                <div class="w-full max-w-md mx-auto">
  <div class="flex border-b border-gray-200 dark:border-gray-700">
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Description
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none border-b-2 border-blue-600 dark:border-blue-400">
      Reviews
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Shipping
    </button>
  </div>
  <div class="mt-8">
    <!-- Content goes here based on the active tab -->
    <div class="text-gray-700 dark:text-gray-300">
      <!-- Reviews Content (Example) -->
      <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
      <div class="space-y-6">
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
            <p class="mt-2">This product is amazing! I highly recommend it.</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 days ago</p>
            <p class="mt-2">Great quality and fast shipping.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

탭 구성 요소

전자 상거래 웹사이트를 위한 미니멀리스트 탭 구성 요소로, 대화형 요소, 반응형 디자인 및 다크 모드 지원이 있습니다.

열다 미리 보기

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <div class="flex items-center space-x-4 border-b">
            <button class="py-2 px-4 text-blue-500 border-b-2 border-blue-500 focus:outline-none">Tab 1</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 2</button>
            <button class="py-2 px-4 text-gray-500 hover:text-blue-500 focus:outline-none">Tab 3</button>
        </div>
        <div class="p-4">
            <div class="block" id="tab1-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 1 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Explore our exclusive collections in Tab 1. Discover vibrant products that can elevate your shopping experience.</p>
            </div>
            <div class="hidden" id="tab2-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 2 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/401" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Find the latest trends and styles in Tab 2. Shop now and enjoy premium materials and designs.</p>
            </div>
            <div class="hidden" id="tab3-content">
                <h2 class="text-lg font-bold text-gray-800 dark:text-white">Tab 3 Content</h2>
                <img class="mt-2 w-full rounded-lg" src="https://picsum.photos/800/402" alt="Random Image">
                <p class="mt-2 text-gray-600 dark:text-gray-400">Check out special deals and discounts in Tab 3. Your ultimate shopping destination is right here.</p>
            </div>
        </div>
    </div>
</div>