모든 구성 요소

팔로우 버튼

머티리얼 디자인 스타일링, 반응형 효과 및 어두운 테마 지원이 있는 간단한 팔로우 버튼입니다.

                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out dark:bg-gray-700 dark:hover:bg-gray-800 dark:shadow-lg">Follow</button>

Badges 구성 요소

Tailwind CSS를 사용하여 설계된 매력적인 마이크로 상호 작용이 있는 반응형 Badges 구성 요소입니다. 다크 모드를 지원하며 이미지 자리 표시자를 포함합니다.

미리보기 열기

                <div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="relative inline-block">
        <img src="https://picsum.photos/200" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-blue-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">1</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/201" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-green-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">2</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/202" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-yellow-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">3</span>
    </div>
    <div class="relative inline-block">
        <img src="https://picsum.photos/203" alt="Badge Image" class="h-24 w-24 rounded-full shadow-lg transform transition-all duration-300 hover:scale-105">
        <span class="absolute top-0 right-0 inline-flex items-center justify-center w-6 h-6 p-2 bg-red-600 rounded-full text-white shadow-lg transform transition-all duration-300 hover:scale-110">4</span>
    </div>
</div>

<style>
/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937; /* Gray-800 */
    }
    .text-white {
        color: #f9fafb; /* Gray-100 */
    }
}
</style>

Neumorphism 사이드바

Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원하는 Neumorphism 스타일의 사이드바 구성 요소입니다.

미리보기 열기

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">

  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphism dark:shadow-neumorphism-dark m-4">
    <div class="flex items-center justify-center h-16 mt-8">
      <div class="h-12 w-12 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset flex items-center justify-center">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-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="M4 6h16M4 12h16M4 18h7"></path></svg>
      </div>
    </div>
    <div class="mt-8">
      <nav>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7h-4m0 0l-4-4m4 4l4 4"></path></svg>
          Home
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
          Services
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
          About
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8m-18 4v4a2 2 0 002 2h14a2 2 0 002-2v-4"></path></svg>
          Contact
        </a>
      </nav>
    </div>
    <div class="mt-auto mb-8">
      <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset mr-3">
        <div class="text-gray-700 dark:text-gray-200">
          John Doe
        </div>
      </div>
    </div>
  </div>

  <!-- Content area (can be added here) -->
  <div class="flex-1 p-8">
    <!-- Your content goes here -->
  </div>

</div>

<style>
  .shadow-neumorphism {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #414141, -7px -7px 15px #b9b9b9;
  }
  .shadow-neumorphism-inset {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphism-dark-inset {
    box-shadow: inset 5px 5px 10px #414141, inset -5px -5px 10px #b9b9b9;
  }
</style>

Badges 구성 요소

Tailwind CSS를 사용하여 설계된 마이크로 인터랙션 및 어두운 테마 지원이 있는 반응형 배지 구성 요소입니다. 이 구성 요소에는 호버 효과가 포함되어 있으며 아바타에 자리 표시자 이미지를 사용합니다.

미리보기 열기

                <div class="flex flex-wrap gap-4 p-6 bg-white dark:bg-gray-800">
    <div class="transition-transform transform hover:scale-110 bg-blue-500 dark:bg-blue-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge One
    </div>
    <div class="transition-transform transform hover:scale-110 bg-green-500 dark:bg-green-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Two
    </div>
    <div class="transition-transform transform hover:scale-110 bg-yellow-500 dark:bg-yellow-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Three
    </div>
    <div class="transition-transform transform hover:scale-110 bg-red-500 dark:bg-red-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Four
    </div>
    <div class="transition-transform transform hover:scale-110 bg-purple-500 dark:bg-purple-700 text-white font-bold rounded-full px-3 py-1 flex items-center">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2">
        Badge Five
    </div>
</div>

RetroCharts구성 요소

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 레트로/빈티지 차트 구성 요소입니다. 자리 표시자 이미지를 포함합니다.

미리보기 열기

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Sales Performance</h2>
  <div class="relative h-48">
    <!-- Placeholder SVG for chart - In a real application, this would be a charting library -->
    <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path fill="#4B5563" d="M0,100 L0,80 C10,75 20,78 30,70 C40,65 50,68 60,60 C70,55 80,58 90,50 C100,45 100,100 Z" class="dark:fill-gray-700"></path>
      <path fill="#6B7280" d="M0,100 L0,85 C10,80 20,83 30,75 C40,70 50,73 60,65 C70,60 80,63 90,55 C100,50 100,100 Z" class="dark:fill-gray-600"></path>
    </svg>
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center text-gray-600 dark:text-gray-300 text-sm font-mono">Chart Data Not Available</div>
  </div>
  <div class="mt-4 flex justify-between text-gray-700 dark:text-gray-300 text-sm">
    <span>January</span>
    <span>February</span>
    <span>March</span>
    <span>April</span>
    <span>May</span>
  </div>
</div>

뉴모피즘 로더

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원하는 Neumorphism 스타일의 로더 구성 요소입니다. JavaScript가 필요하지 않습니다. 미묘한 그림자를 사용하여 배경에서 돌출된 효과를 만듭니다. CSS에서 지원되는 다크 모드.

미리보기 열기

                <div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-32 h-32 relative">
    <div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
    <div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
      Loading...
    </div>
  </div>
</div>

<style>
  .neumorphic-shadow {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .neumorphic-shadow-dark {
    box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
  }
  @keyframes ping {
    0% {
      transform: scale(0.8);
      opacity: 1;
    }
    75%, 100% {
      transform: scale(2);
      opacity: 0;
    }
  }
</style>

드롭다운 메뉴 컴포넌트

Glassmorphism 스타일로 디자인된 드롭다운 메뉴 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리보기 열기

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" aria-expanded="true" aria-haspopup="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.23 7.21a.75.75 0 011.06 0L10 10.293l3.71-3.07a.75.75 0 011.07 1.04l-4.5 4.5a.75.75 0 01-1.06 0l-4.5-4.5a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="z-10 hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Account Settings
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Support
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        License
      </a>
      <div class="border-t border-gray-200 dark:border-gray-700"></div>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
        <img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full mr-2">
        Logout
      </a>
    </div>
  </div>
</div>

<style>
  .bg-glass {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 8px;
  }
  .dark .bg-glass {
    background: rgba(31, 41, 55, 0.4);
  }
</style>

제품 리뷰 구성 요소

Product Reviews Material Design, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소.

미리보기 열기

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Customer Reviews</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <div class="flex items-center mb-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-gray-400 dark:text-gray-600 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed felis at elit eleifend consectetur.
      </p>
    </div>
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <div class="flex items-center mb-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">1 week ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </p>
    </div>
  </div>
</div>

데이터 테이블 구성 요소

다크 모드를 지원하는 Tailwind CSS로 설계된 미니멀하고 반응형이 빠른 데이터 테이블 구성 요소입니다.

미리보기 열기

                <div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
    <table class="min-w-full border-collapse">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
                <th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-900">
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
            <tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
                <td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
                <td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
                <td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
            </tr>
        </tbody>
    </table>
</div>

Brutalism 검색 상자

Brutalism 스타일, 반응형, 어두운 테마 지원, JS 없음이 있는 검색 상자 구성 요소. 필요한 경우 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 사용합니다.

미리보기 열기

                <div class="max-w-md mx-auto">
  <form class="flex items-center">
    <label for="simple-search" class="sr-only">Search</label>
    <div class="relative w-full">
      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path></svg>
      </div>
      <input type="text" id="simple-search" class="bg-white dark:bg-gray-800 border border-black dark:border-white text-black dark:text-white text-sm font-mono focus:ring-black focus:border-black block w-full pl-10 p-2.5 transform -translate-x-1 -translate-y-1 dark:transform-none dark:translate-x-1 dark:translate-y-1 transition duration-100 ease-in-out" placeholder="Search anything..." required>
    </div>
    <button type="submit" class="p-2.5 ml-2 text-sm font-mono text-white bg-black border border-black hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 dark:bg-white dark:text-black dark:border-white dark:hover:bg-gray-200 dark:focus:ring-gray-800 transform translate-x-1 translate-y-1 dark:transform-none dark:-translate-x-1 dark:-translate-y-1 transition duration-100 ease-in-out">
      <svg class="w-5 h-5" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      <span class="sr-only">Search</span>
    </button>
  </form>
</div>

카테고리