구성 요소 Glassmorphism Tabs 구성 요소

Glassmorphism Tabs 구성 요소

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

미리 보기

HTML 코드

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

관련 구성 요소

Skeuomorphic Tabs 컴포넌트

스큐어모피즘으로 스타일링된 반응형 탭 구성 요소로, Tailwind CSS를 활용하여 실제 디자인 요소를 모방합니다. 여기에는 어두운 테마 지원 및 자리 표시자 이미지가 포함됩니다.

열다

탭 구성 요소

Tailwind CSS를 사용하여 다크 모드용으로 설계된 반응형 탭 구성 요소입니다. 사용자가 클릭하여 콘텐츠를 표시할 수 있는 다양한 탭과 함께 자리 표시자 이미지 및 아바타가 있습니다.

열다

탭 구성 요소

소셜 미디어 인터페이스를 위해 설계된 반응형 탭 구성 요소로, 마이크로 인터랙션과 어두운 테마를 특징으로 합니다. 이 구성 요소에는 여러 대화형 요소가 포함되어 있으며 Tailwind CSS를 사용합니다.

열다