모든 구성 요소

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

Navigation Enhancement 구성 요소

Tailwind CSS를 사용하여 머티리얼 디자인 스타일로 디자인된 반응형 탐색 구성 요소로, 어두운 테마 지원 및 반응형 효과를 제공합니다.

                <nav class="bg-white dark:bg-gray-800 shadow-md">
    <div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <a href="#" class="text-gray-800 dark:text-white font-semibold text-lg">Brand</a>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
        <div class="md:hidden flex items-center">
            <button class="text-gray-800 dark:text-white focus:outline-none">
                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="px-4 md:hidden">
        <div class="py-4 flex flex-col space-y-2">
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
            <a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
        </div>
    </div>
</nav>

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-4">Welcome to Our Website</h1>
    <p class="mb-4">This is a responsive navigation enhancement component made using Tailwind CSS with Material Design principles.</p>
    <img src="https://picsum.photos/800/400" alt="Placeholder" class="rounded shadow-lg mb-4">
    <div class="flex">
        <div class="w-1/3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-16 w-16 shadow">
        </div>
        <div class="w-2/3 pl-4">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
        </div>
    </div>
</div>

소셜 구성 요소 구성 요소

Tailwind CSS를 사용하여 높은 대비, 반응형 효과 및 어두운 테마 지원으로 대담한 디자인을 보여주는 브루탈리즘 소셜 구성 요소입니다. 사용자 아바타, 소셜 미디어 링크 및 자리 표시자 이미지를 제공합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Connect With Us</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=1" alt="Profile 1" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">John Doe</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@john_doe</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=2" alt="Profile 2" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Jane Smith</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@jane_smith</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=3" alt="Profile 3" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Alice Johnson</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@alice_j</a>
        </div>
        <div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg text-center">
            <img src="https://picsum.photos/200/200?random=4" alt="Profile 4" class="rounded-full mb-2 mx-auto" />
            <p class="text-lg font-semibold">Bob Brown</p>
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline">@bob_brown</a>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Follow Us</h3>
        <div class="flex space-x-4 mt-2">
            <a href="#" class="text-gray-600 dark:text-gray-400">Facebook</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Twitter</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">Instagram</a>
            <a href="#" class="text-gray-600 dark:text-gray-400">LinkedIn</a>
        </div>
    </div>
</div>

Table of Contents 구성 요소

Glassmorphism 스타일로 디자인된 반응형 목차 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 Tailwind CSS로 밝은 테마와 어두운 테마를 모두 지원합니다.

열다 미리 보기

                <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-60 backdrop-blur-lg border border-gray-300 dark:border-gray-600 rounded-lg p-6 shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Table of Contents</h2>
    <ul class="mt-4 space-y-3">
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section1" class="text-gray-800 dark:text-white">Section 1: Introduction</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section2" class="text-gray-800 dark:text-white">Section 2: Features</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section3" class="text-gray-800 dark:text-white">Section 3: Installation</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section4" class="text-gray-800 dark:text-white">Section 4: Usage</a>
        </li>
        <li class="p-3 rounded-lg bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-80 hover:bg-opacity-50 dark:hover:bg-opacity-60 transition-all duration-300">
            <a href="#section5" class="text-gray-800 dark:text-white">Section 5: Conclusion</a>
        </li>
    </ul>
</div>

Neumorphism Accordion 구성 요소

뉴모픽 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마를 지원하는 아코디언 구성 요소.

열다 미리 보기

                <div x-data="{ activeTab: 1 }" class="max-w-3xl mx-auto p-8 dark:bg-gray-800 dark:text-white rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">

  <div class="mb-6">
    <button @click="activeTab = activeTab === 1 ? null : 1" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 1</h2>
    </button>
    <div x-show="activeTab === 1" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 1. This is where the detailed information for the first section goes.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 2 ? null : 2" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 2</h2>
    </button>
    <div x-show="activeTab === 2" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 2. More detailed information can be added here for the second section.</p>
    </div>
  </div>

  <div class="mb-6">
    <button @click="activeTab = activeTab === 3 ? null : 3" class="w-full text-left py-3 px-4 text-gray-700 font-semibold rounded-md focus:outline-none focus:ring focus:ring-blue-300 dark:text-gray-300 dark:focus:ring-blue-700 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition duration-300 ease-in-out">
      <h2>Section 3</h2>
    </button>
    <div x-show="activeTab === 3" class="mt-2 p-4 text-gray-600 leading-relaxed dark:text-gray-400">
      <p>Content for section 3. This is the content for the third and final section of the accordion.</p>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #cbced1, -7px -7px 15px #ffffff;
  }

  .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4b5563, -7px -7px 15px #374151;
  }

  .shadow-neumorphic-light-inset {
    box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
  }

  .shadow-neumorphic-dark-inset {
    box-shadow: inset 5px 5px 10px #4b5563, inset -5px -5px 10px #374151;
  }

  /* Basic responsiveness */
  @media (max-width: 768px) {
    .p-8 {
      padding: 2rem;
    }
  }
</style>

맨 위로 이동 버튼 구성 요소

머티리얼 디자인 원칙을 따르는 반응형 '맨 위로' 버튼으로, 스타일링 및 반응형 효과를 위해 Tailwind CSS로 다크 모드를 지원합니다.

열다 미리 보기

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
        <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="M12 4v16m0 0L8 16m4 4l4-4" />
        </svg>
    </button>
</div>

<style>
  /* Tailwind dark mode support */
  @media (prefers-color-scheme: dark) {
      .bg-blue-500 { background-color: #3b82f6; }
      .bg-blue-700 { background-color: #2563eb; }
      .text-white { color: #ffffff; }
      .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
      .dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
  }
</style>

Glassmorphism 바닥글

glassmorphism 스타일로 디자인된 반응형 바닥글 구성 요소로, 젖빛 유리와 같은 효과를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다 미리 보기

                <footer class="bg-white bg-opacity-30 backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border-t border-gray-200 dark:border-gray-700 py-10">
    <div class="container mx-auto px-6">
        <div class="flex flex-col md:flex-row justify-between items-center text-center md:text-left">
            <div class="mb-4 md:mb-0">
                <h3 class="text-xl font-semibold">Your Company</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">Your slogan or tagline goes here.</p>
            </div>
            <div class="flex items-center space-x-4">
                <img src="https://picsum.photos/50/50" alt="Random placeholder" class="rounded-full border border-gray-300 dark:border-gray-600">
                <p class="text-sm text-gray-600 dark:text-gray-400">Contact us: [email protected]</p>
            </div>
        </div>
        <div class="flex flex-col md:flex-row justify-center md:justify-between mt-8">
            <div class="mb-4 md:mb-0">
                <ul class="flex space-x-4">
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Home</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">About</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Services</a></li>
                    <li><a href="#" class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
                </ul>
            </div>
            <div>
                <p class="text-sm text-gray-600 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
            </div>
        </div>
    </div>
</footer>

Badges 구성 요소

Glassmorphism 스타일로 디자인된 반응형 Badges 구성 요소로, 젖빛 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex flex-wrap justify-center space-x-4 mt-10">
    <!-- Badge 1 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
        <p class="text-gray-500 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
        <p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
        <p class="text-gray-500 dark:text-gray-400">UX Designer</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
        <p class="text-gray-500 dark:text-gray-400">Product Manager</p>
    </div>
</div>

Material Design CAPTCHA 구성 요소

어두운 테마 지원을 포함하여 머티리얼 디자인 원칙에 따라 스타일링된 반응형 CAPTCHA 구성요소입니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-md max-w-sm mx-auto dark:bg-gray-800 dark:shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Please prove you're human</h2>
    <div class="mt-4 mb-6">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow-sm" />
    </div>
    <div class="flex items-center justify-between w-full">
        <input type="text" placeholder="Enter the text" class="border border-gray-300 rounded-lg p-2 w-3/4 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" />
        <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-lg shadow hover:bg-blue-600 transition duration-200">Submit</button>
    </div>
    <div class="mt-4 text-sm text-gray-600 dark:text-gray-400">
        <p>If you can't read the text, refresh to get a new image.</p>
    </div>
</div>

Success Messages 구성 요소

Tailwind CSS를 사용하여 3D 디자인 스타일, 반응형 효과 및 어두운 테마 지원으로 성공 메시지를 표시하기 위한 구성 요소입니다.

열다 미리 보기

                <div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
        <div class="flex-1">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
            <p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
        <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
    </div>
</div>

레트로헤더 컴포넌트

반응형 효과와 어두운 테마를 지원하는 Retro/Vintage 헤더 구성 요소.

열다 미리 보기

                <header class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-2xl font-bold">RetroHeader</div>
    <nav class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Contact</a>
    </nav>
    <div class="md:hidden">
      <button class="text-gray-800 dark:text-white 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>
</header>

1 ... 209 210 211 212 213 ... 242

카테고리

모든 구성 요소