검색 구성 요소

모든 구성 요소

사용 가능한 모든 Tailwind CSS 구성 요소 찾아보기

Columns 구성 요소

전자 상거래를 위한 간단하고 반응이 빠른 열 구성 요소로, Material Design의 영향, 회색조 색상 및 다크 모드를 지원합니다.

                 কাপড়<div class="container mx-auto p-4 bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-md rounded-lg"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum1/400/300" alt="Product Image 1"> <h3 class="text-lg font-semibold mb-2">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 1. This is a very appealing product.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$19.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum2/400/300" alt="Product Image 2"> <h3 class="text-lg font-semibold mb-2">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 2. Another great item for your needs.</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$29.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> <div class="p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-sm"> <img class="w-full h-48 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum3/400/300" alt="Product Image 3"> <h3 class="text-lg font-semibold mb-2">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300 mb-4">Short description of product 3. You definitely want this one!</p> <span class="block text-xl font-bold text-gray-800 dark:text-gray-100 mb-4">$39.99</span> <button class="w-full bg-gray-800 dark:bg-gray-500 text-white py-2 px-4 rounded-md hover:bg-gray-900 dark:hover:bg-gray-600 transition duration-300">Add to Cart</button> </div> </div></div>

진행률 표시줄

전자 상거래를 위한 다크 모드를 지원하는 반응형 진행률 표시줄 구성 요소로, 생생한 색 구성표와 단순한 레이아웃을 특징으로 합니다.

열다 미리 보기

                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4 relative overflow-hidden">
  <div class="bg-indigo-600 h-4 rounded-full dark:bg-indigo-400" style="width: 75%;">
    <span class="absolute right-2 top-0 h-full flex items-center text-white text-xs font-bold">75%</span>
  </div>
</div>

Content Display Components 컴포넌트

마이크로 인터랙션, 그레이스케일 색상 및 중간 정도의 복잡성을 가진 Content Display Component로, 반응형 어두운 테마를 지원하는 포트폴리오를 위해 설계되었습니다.

열다 미리 보기

                
<div class="p-8 bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Article Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum1/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">Project Alpha: A Deep Dive</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore the intricacies of Project Alpha, a landmark achievement in innovative design and engineering.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 7 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Article Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum2/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">The Future of UI/UX: Trends and Predictions</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Dive into the exciting world of UI/UX and discover what lies ahead for cutting-edge design.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 10 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Testimonial Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 p-6 dark:bg-gray-800 dark:hover:bg-gray-700 md:col-span-2 flex items-start space-x-4">
        <img class="w-16 h-16 rounded-full object-cover shadow-md transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">"This component embodies the perfect blend of subtle animations and clean aesthetics. It

Notifications 구성 요소

Dashboard에 대한 Brutalist Notifications 구성 요소

열다 미리 보기

                <div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4" dark:bg-gray-900 dark:bg-opacity-80>
  <div class="bg-yellow-400 border-4 border-black p-8 shadow-brutalism w-full max-w-md transform -rotate-3 hover:rotate-0 transition-transform duration-300 dark:bg-purple-700 dark:border-yellow-400">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-extrabold text-black uppercase tracking-wider dark:text-yellow-400">Notifications</h2>
      <button class="text-black hover:text-red-700 text-4xl font-bold dark:text-yellow-400 dark:hover:text-red-400">&times;</button>
    </div>
    <div class="space-y-6">
      <div class="bg-blue-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-teal-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">New message from <span class="underline">Alex</span></p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">"Hey, are you free for a quick call today?"</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">2 min ago</span>
        </div>
      </div>

      <div class="bg-red-600 border-2 border-black p-4 flex items-start space-x-4 transform -rotate-2 hover:rotate-0 transition-transform duration-300 dark:bg-orange-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">Task <span class="underline">"Prepare Q3 Report"</span> is overdue</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">Please complete it by end of day.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">1 hour ago</span>
        </div>
      </div>

      <div class="bg-green-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-lime-500 dark:border-yellow-400">
        <img src="https://picsum.photos/seed/dashboard/50/50" alt="Dashboard Icon" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400 object-cover">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">System Update Available</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">New features and bug fixes. Click to learn more.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">5 hours ago</span>
        </div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-black text-yellow-400 border-2 border-yellow-400 px-6 py-3 font-bold uppercase text-lg tracking-wider hover:bg-yellow-400 hover:text-black transition-colors duration-300 dark:bg-yellow-400 dark:text-black dark:border-purple-700 dark:hover:bg-purple-700 dark:hover:text-yellow-400">
        View All
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px black;
  }

  /* Dark mode styles come from Tailwind dark: prefix */
</style>

드롭다운 메뉴 컴포넌트

대시보드를 위한 반응형 3D 스타일 드롭다운 메뉴로, 트라이어딕 색 구성표와 다크 모드를 지원합니다.

열다 미리 보기

                
<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md px-4 py-2 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 text-white text-sm font-medium shadow-lg hover:from-blue-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transform transition-transform duration-200 active:scale-95 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 dark:hover:from-gray-600 dark:hover:via-gray-700 dark:hover:to-gray-800" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Options
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 opacity-0 scale-95 transition-all duration-200 ease-out dark:bg-gray-800 dark:ring-gray-700 dark:divide-gray-700"
    role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">License</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 hover:text-white dark:text-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
    </div>
  </div>
</div>

<script>
  // This is a placeholder for JavaScript. In a real application, you would toggle the dropdown visibility with JS.
  // For this example, we'll simulate a "hover" effect with Tailwind classes that are normally toggled by JS.
  const dropdownButton = document.getElementById('options-menu');
  const dropdownPanel = dropdownButton.nextElementSibling;

  dropdownButton.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

  dropdownPanel.addEventListener('mouseover', () => {
    dropdownPanel.classList.remove('opacity-0', 'scale-95');
    dropdownPanel.classList.add('opacity-100', 'scale-100');
  });

  dropdownPanel.addEventListener('mouseout', () => {
    dropdownPanel.classList.remove('opacity-100', 'scale-100');
    dropdownPanel.classList.add('opacity-0', 'scale-95');
  });

</script>

Glassmorphism Loader 구성 요소

보색이 있는 간단한 glassmorphism 스타일의 로더 구성 요소로, 포트폴리오에 적합하며 반응형 및 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>

Chat Window 구성 요소

파스텔 색조의 단순하고 반응형이 빠른 3D 스타일의 채팅 창 구성 요소로, 포트폴리오에서 작업이나 제품을 선보일 수 있도록 설계되었습니다. 여기에는 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex flex-col h-screen bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-800 dark:to-gray-900">
  <header class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Chat Window</h1>
  </header>

  <div class="flex-1 p-4 overflow-y-auto">
    <!-- Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        Hi there! This is an example of an incoming message in 3D.
      </div>
    </div>

    <!-- Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And this is an outgoing message, also with a cool 3D effect!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

    <!-- Another Incoming Message -->
    <div class="flex items-end mb-4">
      <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-lg">
      <div class="bg-indigo-200 dark:bg-indigo-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        The pastel colors give it a soft and inviting feel.
      </div>
    </div>

    <!-- Another Outgoing Message -->
    <div class="flex justify-end items-end mb-4">
      <div class="bg-purple-200 dark:bg-purple-700 text-gray-800 dark:text-gray-100 p-3 rounded-lg shadow-lg relative transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-300">
        And it's simple enough for a portfolio showcase!
      </div>
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar" class="w-8 h-8 rounded-full ml-3 shadow-lg">
    </div>

  </div>

  <footer class="p-4 bg-white dark:bg-gray-700 shadow-md relative z-10">
    <div class="flex">
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-300 dark:focus:ring-indigo-600 shadow-inner">
      <button class="ml-3 px-6 py-3 bg-indigo-400 dark:bg-indigo-600 text-white rounded-lg font-semibold shadow-md hover:bg-indigo-500 dark:hover:bg-indigo-700 transition-colors duration-300">Send</button>
    </div>
  </footer>
</div>

메가 메뉴 컴포넌트

미니멀리스트/플랫 디자인 - 다크 모드를 지원하는 생동감 넘치고 심플한 전자상거래 메가 메뉴

열다 미리 보기

                <nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">ShopSwift</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Categories</button>
        <div class="absolute left-0 mt-3 w-56 bg-white dark:bg-gray-800 shadow-lg rounded-md opacity-0 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 origin-top transform scale-95">
          <div class="p-4">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Books</a>
          </div>
        </div>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Deals</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
</nav>

바닥글 구성 요소

보색, 적당한 복잡성 및 소셜 미디어 통합을 갖춘 미니멀한 바닥글 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다 미리 보기

                <footer class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap justify-between items-center">
      <div class="w-full md:w-1/3 text-center md:text-left mb-4 md:mb-0">
        <p class="text-gray-600 dark:text-gray-400 text-sm">&copy; 2023 SocialApp. All rights reserved.</p>
      </div>
      <div class="w-full md:w-1/3 flex justify-center mb-4 md:mb-0">
        <ul class="flex space-x-6">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
        </ul>
      </div>
      <div class="w-full md:w-1/3 flex justify-center md:justify-end">
        <ul class="flex space-x-4">
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-facebook-f"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-twitter"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-instagram"></i></a></li>
          <li><a href="#" class="text-blue-600 dark:text-orange-400 hover:text-blue-800 dark:hover:text-orange-500"><i class="fab fa-linkedin-in"></i></a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

탭 구성 요소

블로그/콘텐츠 소비를 위한 다크 모드를 지원하는 반응형 탭 구성 요소입니다. 눈의 피로를 줄이기 위해 어두운 배경의 트라이어드 색 구성표를 사용합니다.

열다 미리 보기

                
<div class="dark:bg-gray-900 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-gray-800 dark:bg-gray-950 rounded-lg shadow-xl overflow-hidden">
      <div class="flex border-b border-gray-700 dark:border-gray-700">
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-cyan-400 dark:text-cyan-500 border-b-2 border-cyan-400 dark:border-cyan-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Featured Articles
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-purple-400 dark:text-purple-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Popular Posts
        </button>
        <button class="flex-1 py-4 px-6 text-center text-lg font-semibold text-fuchsia-400 dark:text-fuchsia-500 hover:bg-gray-700 dark:hover:bg-gray-800 focus:outline-none transition-colors duration-300">
          Latest News
        </button>
      </div>

      <div class="p-6 md:p-8">
        <!-- Tab Content 1: Featured Articles -->
        <div class="space-y-8">
          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article1/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Future of AI in Content Creation</h3>
                <p class="text-gray-300 text-base leading-relaxed">Explore how artificial intelligence is revolutionizing the way we create and consume digital content, from automated writing to personalized recommendations.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
                <span>John Doe • 2 hours ago</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article2/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">Mastering Responsive Design with Tailwind CSS</h3>
                <p class="text-gray-300 text-base leading-relaxed">Dive deep into the utility-first CSS framework and learn how to build stunning, responsive web interfaces with ease and efficiency.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
                <span>Jane Smith • Yesterday</span>
              </div>
            </div>
          </div>

          <div class="flex flex-col md:flex-row bg-gray-700 dark:bg-gray-900 rounded-lg shadow-md overflow-hidden transform transition-transform duration-300 hover:scale-[1.02]">
            <img class="w-full md:w-1/3 h-48 md:h-auto object-cover" src="https://picsum.photos/seed/article3/600/400" alt="Article Thumbnail">
            <div class="p-6 flex flex-col justify-between">
              <div>
                <h3 class="text-2xl font-bold text-white mb-2">The Art of Storytelling in Digital Media</h3>
                <p class="text-gray-300 text-base leading-relaxed">Uncover the timeless principles of captivating narratives and how they apply to modern digital platforms and content forms.</p>
              </div>
              <div class="mt-4 flex items-center text-gray-400">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author Avatar">
                <span>Peter Jones • 3 days ago</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 125 126 127 128 129 ... 335

검색 구성 요소

카테고리

모든 구성 요소