모든 구성 요소

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

레트로 빈티지 아코디언 컴포넌트

Dashboard 데이터 시각화를 위한 어스 톤이 있는 레트로/빈티지 스타일의 아코디언 구성 요소입니다. 반응형 및 어두운 테마 지원으로 중간 수준의 복잡성을 위해 설계되었습니다.

                <div class="flex flex-col p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg text-brown-700 dark:text-brown-300 font-bold mb-4">Dashboard</h2>
    <div class="accordion space-y-4">
        <!-- Accordion Item 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 1</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-yellow-200 dark:bg-yellow-600 hidden">
                <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 1, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 2 -->
        <div class="bg-green-300 dark:bg-green-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 2</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-green-200 dark:bg-green-600 hidden">
                <img src="https://picsum.photos/300/200?random=2" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 2, providing insights and details.</p>
            </div>
        </div>
        
        <!-- Accordion Item 3 -->
        <div class="bg-red-300 dark:bg-red-700 rounded-lg shadow-lg">
            <button class="flex justify-between w-full p-4 text-left text-brown-900 dark:text-gray-200">  
                <span>Item 3</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform rotate-0 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" /></svg>
            </button>
            <div class="p-4 bg-red-200 dark:bg-red-600 hidden">
                <img src="https://picsum.photos/300/200?random=3" alt="Random Image" class="mb-2 rounded-md">
                <p class="text-brown-800 dark:text-brown-200">This is the content of item 3, providing insights and details.</p>
            </div>
        </div>
    </div>
</div>

미디어 임베드 컴포넌트

glassmorphism 효과로 디자인된 미디어 임베드 구성 요소로, 어두운 테마를 지원하는 비즈니스 웹 사이트에 적합한 반응형 디자인을 특징으로 합니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-8 bg-white bg-opacity-20 backdrop-blur-md rounded-xl shadow-lg max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-40">
  <div class="flex items-center space-x-4 mb-6">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-md">
    <div class="flex flex-col">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Company Name</h2>
      <p class="text-gray-600 dark:text-gray-400">Professional tagline or subtitle goes here.</p>
    </div>
  </div>
  <div class="relative w-full py-6 bg-white bg-opacity-30 rounded-lg shadow-md dark:bg-gray-700 dark:bg-opacity-30">
    <iframe class="w-full h-48 rounded-lg" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0" allowfullscreen></iframe>
    <div class="absolute inset-0 rounded-lg border-2 border-white opacity-30"></div>
  </div>
  <div class="mt-4">
    <button class="px-4 py-2 bg-green-500 text-white rounded-lg shadow hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800">Learn More</button>
  </div>
</div>

로그인/가입 구성 요소

포트폴리오에 적합한 파스텔 색 구성표가 있는 다크 모드용으로 설계된 간단한 로그인/가입 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold mb-6 text-center">Welcome to My Portfolio</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input type="password" id="password" placeholder="your password" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <button type="submit" class="w-full py-2 bg-green-600 hover:bg-green-500 text-white rounded">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-sm">Don't have an account? <a href="#" class="text-green-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<div class="dark:bg-gray-900 dark:text-gray-200">
    <div class="dark:bg-gray-800 dark:border-gray-700">
        <input type="email" class="dark:bg-gray-700 dark:border-gray-600">
        <input type="password" class="dark:bg-gray-700 dark:border-gray-600">
    </div>
</div>

Sticky Navigation 구성 요소

Responsive Sticky Navigation Component with Dark Mode

열다 미리 보기

                <nav class="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-50">
  <div class="container mx-auto px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">Social Site</div>
      <div class="hidden md:flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a>
      </div>
      <div class="md:hidden">
        <button class="mobile-menu-button text-gray-700 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 focus:outline-none">
          <svg class="h-6 w-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>
    <div class="mobile-menu hidden md:hidden mt-2">
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Profile</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Settings</a>
      <a href="#" class="block py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">Messages</a>
    </div>
  </div>
</nav>

페이지 매김 구성 요소

3D, 트라이어드 컬러, 심플, 비즈니스/코퍼레이트 스타일 및 다크 모드를 지원하는 반응형 페이지 매김 컴포넌트

열다 미리 보기

                <nav aria-label="Pagination" class="flex justify-center items-center space-x-2 dark:bg-gray-800 p-4 rounded-md">
  <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Previous</a>
  <a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">1</a>
  <a href="#" aria-current="page" class="px-3 py-2 bg-red-600 text-white rounded-md dark:bg-red-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">2</a>
  <a href="#" class="px-3 py-2 bg-green-500 text-white rounded-md dark:bg-green-700 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">3</a>
  <a href="#" class="px-3 py-2 bg-blue-600 text-white rounded-md dark:bg-blue-800 dark:text-gray-200 transform transition duration-300 ease-in-out hover:scale-110">Next</a>
</nav>

스큐어모픽 내비게이션 바

스큐어모픽 스타일과 파스텔 색 구성표로 디자인된 포트폴리오 탐색 모음 구성 요소로, 어두운 모드 지원을 포함합니다. 링크 및 드롭다운 메뉴와 같은 대화형 요소가 있습니다.

열다 미리 보기

                <nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between">  <div class="flex items-center space-x-4">    <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">    <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span>  </div>  <ul class="flex space-x-6">    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li>    <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li>  </ul>  <div class="relative">    <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none">      Menu      <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span>    </button>    <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu">      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li>      <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li>    </ul>  </div>  <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>

이미지 라이트박스

어두운 테마의 반응형 이미지 라이트박스 구성 요소

열다 미리 보기

                <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto lg:flex lg:items-center lg:justify-center bg-black bg-opacity-90">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl mx-auto">
    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 px-4 py-3">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image Title</h3>
      <button onclick="closeModal()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <img src="https://picsum.photos/800/600" alt="Image" class="w-full h-auto rounded-lg">
    </div>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
  <!-- Image cards to trigger the lightbox -->
  <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/300" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
    <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/301" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/302" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/303" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
  
</div>

<script>
function openModal() {
  document.getElementById('imageModal').classList.remove('hidden');
}

function closeModal() {
  document.getElementById('imageModal').classList.add('hidden');
}
</script>

브루탈리즘 햄버거 메뉴

Tailwind CSS를 사용하여 유사한 색 구성표, 중간 정도의 복잡성, 반응형 디자인 및 어두운 테마를 지원하는 대시보드용 브루탈리즘에서 영감을 받은 햄버거 메뉴 구성 요소. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="bg-gray-200 dark:bg-gray-800 font-mono">
  <div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center">
      <div class="text-xl font-bold text-gray-900 dark:text-gray-100">Dashboard</div>
      <button class="text-gray-900 dark:text-gray-100 focus:outline-none lg:hidden">
        <svg class="h-6 w-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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>

    <div class="hidden lg:block mt-4">
      <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
      </nav>
    </div>
  </div>

  <!-- Mobile Menu (Hidden by default) -->
  <div class="fixed inset-0 bg-gray-200 dark:bg-gray-800 z-50 hidden">
    <div class="flex justify-end p-4">
      <button class="text-gray-900 dark:text-gray-100 focus:outline-none">
        <svg class="h-6 w-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <nav class="flex flex-col items-center mt-8 space-y-4">
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Analytics</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Reports</a>
      <a href="#" class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Settings</a>
    </nav>
  </div>
</div>

아코디언 구성 요소

어스 톤 색 구성표, 중간 정도의 복잡성, 소셜 미디어 목적, 반응형 디자인 및 어두운 테마 지원이 있는 다크 모드 아코디언 구성 요소. 자바스크립트가 없습니다.

열다 미리 보기

                <div class="max-w-md mx-auto rounded-md overflow-hidden shadow-lg bg-stone-800 dark:bg-stone-900">
  <div class="accordion">
    <div class="accordion-item">
      <input type="checkbox" id="accordion1" class="hidden">
      <label for="accordion1" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 1
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 1.</p>
      </div>
    </div>
    <div class="accordion-item">
      <input type="checkbox" id="accordion2" class="hidden">
      <label for="accordion2" class="flex justify-between items-center p-4 cursor-pointer bg-stone-700 dark:bg-stone-800 text-stone-200 dark:text-stone-300">
        Section 2
        <svg class="w-5 h-5 text-stone-200 dark:text-stone-300 transform transition-transform duration-300 ease-in-out" 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="M19 9l-7 7-7-7"></path>
        </svg>
      </label>
      <div class="accordion-content px-4 pb-4 text-stone-300 dark:text-stone-400 hidden">
        <p>Content for section 2.</p>
      </div>
    </div>
  </div>
</div>

<style>
.accordion-item input:checked ~ label svg {
  transform: rotate(180deg);
}
.accordion-item input:checked ~ .accordion-content {
  display: block;
}
</style>

체크 아웃 양식 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 체크아웃 양식 구성 요소입니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-6 bg-gray-900">
  <div class="w-full max-w-md bg-gray-800 p-8 rounded-md shadow-md">
    <h2 class="text-2xl font-bold text-white mb-6">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-white text-sm font-bold mb-2">Name</label>
        <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-white text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-4">
        <label for="card" class="block text-white text-sm font-bold mb-2">Card Number</label>
        <input type="text" id="card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-6">
        <label for="expiry" class="block text-white text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
      </div>
    </form>
  </div>
</div>

1 ... 107 108 109 110 111 ... 262

카테고리

모든 구성 요소