CCHub Logo CCHub Tailwind Collection
구성 요소 탭 GlassyGrayscale탭

GlassyGrayscale탭

Glassmorphism Grayscale Simple Dashboard Tabs 다크 모드를 지원하는 구성 요소

미리 보기

HTML 코드 

<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 및 Tailwind 클래스만 사용합니다.

열다

아트데코탭컴포넌트

아르데코 미학이 가미된 복잡하고 반응이 빠른 탭 구성 요소로, 사진 포트폴리오를 위해 설계되었으며, 기업 블루 톤과 다크 모드 지원을 특징으로 합니다.

열다

산업VibrantTabs

복잡하고 생동감 넘치는 산업 테마의 탭 구성 요소로, 다중 공급업체 마켓플레이스에 적합하며, 노출된 요소, 원료 미학 및 높은 채도의 색상을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다