CCHub Logo CCHub Tailwind Collection
구성 요소 탭 Skeuomorphic Tabs 컴포넌트

Skeuomorphic Tabs 컴포넌트

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

미리 보기

HTML 코드 

<div class="flex flex-col w-full max-w-md mx-auto p-4">
  <div class="tabs flex space-x-2">
    <button class="tab px-4 py-2 font-semibold text-white bg-gray-800 rounded-lg shadow-lg focus:outline-none ">Tab 1</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 2</button>
    <button class="tab px-4 py-2 font-semibold text-gray-800 bg-white rounded-lg shadow-lg focus:outline-none ">Tab 3</button>
  </div>
  <div class="tab-content mt-4 p-4 bg-gray-200 rounded-lg shadow-lg dark:bg-gray-800">
    <div class="flex items-center space-x-4">
      <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
      <div class="text-gray-700 dark:text-gray-300">
        <h2 class="font-bold text-lg">Tab 1 Content</h2>
        <p>This section contains information related to Tab 1.</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image" />
      </div>
    </div>
  </div>
</div>
<style>
  /* Dark Mode Support */
  @media (prefers-color-scheme: dark) {
    .bg-gray-800 { background-color: #2d3748; }
    .bg-gray-200 { background-color: #4a5568; }
    .text-gray-700 { color: #cbd5e0; }
  }
</style>

관련 구성 요소

Industrial_Monochromatic_Tabs_Component_Booking_Reservation

산업적, 단색 미학을 가진 단순하고 반응이 빠른 탭 구성 요소로, 예약 및 예약 시스템을 위해 설계되었습니다. 다크 모드를 지원하며 원자재와 노출된 요소를 사용하여 실용주의적인 매력을 선사합니다.

열다

탭 구성 요소

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

열다

아르 데코 뉴스 탭 구성 요소

뉴스 및 저널리즘 웹 사이트를 위해 설계된 복잡하고 반응이 빠르며 고급스러운 '아르 데코' 스타일 탭 구성 요소로, 기하학적 패턴, 풍부한 아날로그 색상 및 다크 모드 지원을 특징으로 합니다. 콘텐츠 탐색을 위한 여러 대화형 요소를 제공합니다.

열다