검색 구성 요소

모든 구성 요소

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

수채화 예술적 데이터 테이블

부드러운 수채화/예술적 디자인 스타일과 달콤한 사탕 같은 색상의 반응형 데이터 테이블 구성 요소로 비영리/자선 단체에 적합합니다. 다크 모드 지원이 포함되며 시각적 매력과 가독성에 중점을 두고 중간 정도의 복잡성을 보여줍니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-50 via-pink-50 to-rose-50 dark:from-purple-950 dark:via-pink-950 dark:to-rose-950 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <div class="max-w-7xl mx-auto backdrop-blur-sm bg-white/70 dark:bg-gray-800/70 shadow-xl rounded-3xl overflow-hidden ring-2 ring-pink-300 dark:ring-pink-700 p-4 sm:p-6 lg:p-8">
    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-6 pb-4 border-b border-pink-200 dark:border-pink-800">
      <div>
        <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight drop-shadow-md tracking-wide">Donation Impact Dashboard</h2>
        <p class="mt-2 text-lg text-rose-500 dark:text-rose-300 font-medium">See the difference our community makes, presented with a touch of art.</p>
      </div>
      <button class="mt-4 sm:mt-0 px-6 py-3 rounded-full bg-gradient-to-r from-pink-500 to-rose-500 text-white dark:from-pink-600 dark:to-rose-600 hover:from-pink-600 dark:hover:from-pink-700 hover:to-rose-600 dark:hover:to-rose-700 transition-all duration-300 shadow-lg hover:shadow-xl font-bold tracking-wide text-lg border-2 border-white/50 dark:border-gray-900/50 transform hover:-translate-y-0.5 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 flex items-center justify-center space-x-2">
        <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="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
        <span>Add New Record</span>
      </button>
    </div>

    <!-- Search and Filter Section -->
    <div class="mb-6 flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-2/3">
        <input type="text" placeholder="Search by Donor, Cause, or Date..." class="w-full pl-10 pr-4 py-3 rounded-full bg-pink-100 dark:bg-gray-700 border-2 border-pink-200 dark:border-pink-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 placeholder-pink-400 dark:placeholder-pink-500 shadow-inner">
        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-pink-400 dark:text-pink-500" 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>
      </div>
      <select class="w-full sm:w-1/3 appearance-none px-4 py-3 rounded-full bg-pink-100 dark:bg-gray-700 border-2 border-pink-200 dark:border-pink-700 text-gray-700 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 shadow-inner cursor-pointer">
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="all">Filter by Cause</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="education">Education</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="health">Health & Wellness</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="environment">Environment</option>
        <option class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200" value="animals">Animal Welfare</option>
      </select>
    </div>

    <!-- Table Section -->
    <div class="overflow-x-auto rounded-2xl ring-1 ring-pink-200 dark:ring-pink-800 shadow-xl">
      <table class="min-w-full divide-y divide-pink-200 dark:divide-pink-800 table-auto">
        <thead class="bg-pink-200/80 dark:bg-pink-900/80 sticky top-0 backdrop-blur-sm">
          <tr>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider rounded-tl-2xl">Donor</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Amount</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Cause</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider">Date</th>
            <th scope="col" class="px-4 py-3 text-left text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider hidden sm:table-cell">Status</th>
            <th scope="col" class="px-4 py-3 text-right text-xs sm:text-sm font-semibold text-pink-700 dark:text-pink-300 uppercase tracking-wider rounded-tr-2xl">Actions</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800 divide-y divide-pink-100 dark:divide-pink-800">
          <!-- Row 1 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Donor Avatar">
              <span>Olivia Chen</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$500.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Education</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-26</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 2 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Donor Avatar">
              <span>Marcus Lee</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$1,200.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">Health</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-25</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 3 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Donor Avatar">
              <span>Sarah Project</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$250.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300">Environment</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-24</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 4 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Donor Avatar">
              <span>David Kim</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$75.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">Animal Welfare</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-23</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
          <!-- Row 5 -->
          <tr class="hover:bg-pink-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
            <td class="px-4 py-3 whitespace-nowrap overflow-hidden text-sm sm:text-base font-medium text-gray-900 dark:text-gray-100 flex items-center">
              <img class="h-8 w-8 rounded-full object-cover mr-3 ring-1 ring-pink-300 dark:ring-pink-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Donor Avatar">
              <span>Emily White</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-green-600 dark:text-green-400 font-semibold">$150.00</td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-700 dark:text-gray-300">
              <span class="inline-flex px-3 py-1 text-xs font-semibold leading-tight rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">Education</span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-sm sm:text-base text-gray-600 dark:text-gray-400">2023-10-22</td>
            <td class="px-4 py-3 whitespace-nowrap hidden sm:table-cell">
              <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                Completed
              </span>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm sm:text-base font-medium">
              <a href="#" class="text-pink-600 dark:text-pink-400 hover:text-pink-900 dark:hover:text-pink-300 transition-colors mx-1 sm:mx-2">Edit</a>
              <a href="#" class="text-rose-600 dark:text-rose-400 hover:text-rose-900 dark:hover:text-rose-300 transition-colors mx-1 sm:mx-2">Delete</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <nav class="mt-8 flex items-center justify-between flex-col sm:flex-row space-y-4 sm:space-y-0 text-sm sm:text-base">
      <div class="text-gray-700 dark:text-gray-300">
        Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">50</span> results
      </div>
      <div class="inline-flex -space-x-px rounded-full shadow-md ring-1 ring-pink-200 dark:ring-pink-800 overflow-hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 rounded-l-full transition-all duration-200">
          Previous
        </a>
        <a href="#" aria-current="page" class="relative z-10 inline-flex items-center px-4 py-2 font-semibold text-white bg-gradient-to-r from-pink-500 to-rose-500 dark:from-pink-600 dark:to-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-300 dark:focus:ring-rose-700 transition-all duration-200">
          1
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
          2
        </a>
        <a href="#" class="relative hidden sm:inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
          3
        </a>
        <span class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800">...</span>
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 transition-all duration-200">
          10
        </a>
        <a href="#" class="relative inline-flex items-center px-4 py-2 font-semibold text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 ring-1 ring-inset ring-pink-100 dark:ring-pink-800 hover:bg-pink-50 dark:hover:bg-gray-700 rounded-r-full transition-all duration-200">
          Next
        </a>
      </div>
    </nav>

  </div>
</div>

OAuth 버튼 컴포넌트 - 수채화/예술적

패션 및 뷰티 브랜드를 위해 설계된 예술적이고 복고풍 테마의 OAuth 버튼 구성 요소입니다. 부드럽고 칠해진 질감, 차분한 빈티지 색상이 특징이며 Google, Apple 및 Facebook 로그인 옵션이 포함되어 있습니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-rose-50 to-pink-100 dark:from-stone-900 dark:to-purple-950 font-sans">
  <div class="relative w-full max-w-md p-8 md:p-10 rounded-3xl shadow-xl overflow-hidden
    bg-white/70 backdrop-blur-sm dark:bg-gray-800/70
    border border-pink-200 dark:border-purple-800
    font-semibold text-gray-800 dark:text-gray-100">

    <!-- Background artistic elements -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-30">
      <img src="https://picsum.photos/id/1069/800/800" alt="background texture 1" class="absolute top-0 -left-10 w-[500px] h-[500px] object-cover object-center scale-150 rotate-12 blur-md opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: ellipse(60% 40% at 50% 50%); filter: contrast(1.2) hue-rotate(30deg);"/>
      <img src="https://picsum.photos/id/1070/800/800" alt="background texture 2" class="absolute bottom-0 -right-10 w-[500px] h-[500px] object-cover object-center scale-150 -rotate-12 blur-md opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: ellipse(60% 40% at 50% 50%); filter: contrast(1.2) hue-rotate(-30deg);"/>
    </div>
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-rose-100/30 via-sky-100/30 to-purple-100/30 dark:from-stone-900/50 dark:via-gray-900/50 dark:to-purple-900/50 mix-blend-multiply"></div>

    <!-- Content -->
    <div class="relative z-10 flex flex-col items-center">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-center mb-4 text-violet-700 dark:text-purple-300 drop-shadow-sm font-serif" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">
        Unlock Your Style
      </h2>
      <p class="text-center text-sm md:text-md mb-8 text-gray-700 dark:text-gray-300 max-w-sm">
        Sign in for exclusive beauty tips, fashion collections, and personalized offers.
      </p>

      <div class="space-y-4 w-full">
        <!-- Google Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-amber-100 border border-amber-300 text-amber-800 
          hover:bg-amber-200 hover:border-amber-400
          dark:bg-yellow-700 dark:border-yellow-600 dark:text-yellow-100
          dark:hover:bg-yellow-600 dark:hover:border-yellow-500
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5 
          leading-none text-lg font-bold font-heading"
          style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 80%); filter: saturate(1.1);">
          <svg class="w-6 h-6 mr-3" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24.001 10.231c4.542 0 7.854 1.936 9.684 3.73l6.577-6.529C35.485 3.398 29.986 0 24.001 0c-8.913 0-16.592 4.908-20.485 12.012l7.251 5.617c1.942-5.719 7.426-9.172 13.234-9.172z" fill="#EA4335"/>
            <path d="M46.726 23.905c0-1.5-.121-2.909-.345-4.256H24.001v8.082h12.529c-.544 3.031-2.222 5.59-4.881 7.301l6.471 5.011c3.96-7.301 6.27-16.568 6.27-26.138z" fill="#4285F4"/>
            <path d="M3.516 29.808l7.251-5.617c-.506-1.564-.784-3.232-.784-4.891s.278-3.327.784-4.891l-7.251-5.617C.949 14.59.001 19.167.001 23.905s.949 9.315 3.515 13.56z" fill="#FBBC05"/>
            <path d="M24.001 48c6.643 0 12.261-2.091 16.34-5.679l-6.471-5.011c-2.457 1.637-5.59 2.59-9.869 2.59-8.497 0-13.844-5.719-15.969-13.913l-7.251 5.617C7.409 43.092 15.088 48 24.001 48z" fill="#34A853"/>
          </svg>
          Sign in with Google
        </button>

        <!-- Apple Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-gray-900 border border-black text-white 
          hover:bg-gray-800 hover:border-gray-900
          dark:bg-gray-200 dark:border-gray-50 dark:text-gray-900
          dark:hover:bg-gray-300 dark:hover:border-gray-100
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5
          leading-none text-lg font-bold font-heading"
          style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 80%); filter: saturate(1.1);">
          <svg class="w-6 h-6 mr-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.5c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5zm0 2.5c-4.962 0-9 4.038-9 9s4.038 9 9 9 9-4.038 9-9-4.038-9-9-9zM12 6c.942 0 1.7.758 1.7 1.7S12.942 9.4 12 9.4s-1.7-.758-1.7-1.7S11.058 6 12 6zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2zm0 3c-2.316 0-4.2 1.884-4.2 4.2s1.884 4.2 4.2 4.2 4.2-1.884 4.2-4.2-1.884-4.2-4.2-4.2zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2zM12 12c.942 0 1.7.758 1.7 1.7S12.942 15.4 12 15.4s-1.7-.758-1.7-1.7S11.058 12 12 12zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2z"/>
            <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.5c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5z" clip-rule="evenodd" fill-rule="evenodd"/>
            <path d="M12 10.428a2.572 2.572 0 100-5.144 2.572 2.572 0 000 5.144zm0 2.5c-3.149 0-5.7 2.551-5.7 5.7s2.551 5.7 5.7 5.7 5.7-2.551 5.7-5.7-2.551-5.7-5.7-5.7z"/>
          </svg>
          Sign in with Apple
        </button>

        <!-- Facebook Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-blue-600 border border-blue-700 text-white 
          hover:bg-blue-700 hover:border-blue-800
          dark:bg-blue-800 dark:border-blue-700 dark:text-blue-100
          dark:hover:bg-blue-700 dark:hover:border-blue-600
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5
          leading-none text-lg font-bold font-heading">
          <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 5.295 3.882 9.697 8.948 10.366V15h-2.915v-3h2.915V9.45c0-2.88 1.758-4.45 4.33-4.45 1.237 0 2.302.09 2.61.127v2.261h-1.332c-1.307 0-1.562.619-1.562 1.528V12h3.137l-.547 3h-2.59V22.366c5.066-.669 8.948-5.071 8.948-10.366z"/>
            <path fill-rule="evenodd" d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 5.295 3.882 9.697 8.948 10.366V15h-2.915v-3h2.915V9.45c0-2.88 1.758-4.45 4.33-4.45 1.237 0 2.302.09 2.61.127v2.261h-1.332c-1.307 0-1.562.619-1.562 1.528V12h3.137l-.547 3h-2.59V22.366c5.066-.669 8.948-5.071 8.948-10.366z" clip-rule="evenodd"/>
          </svg>
          Sign in with Facebook
        </button>
      </div>

      <div class="flex items-center w-full mt-8 mb-6">
        <hr class="flex-grow border-t border-gray-300 dark:border-gray-600">
        <span class="px-4 text-gray-500 dark:text-gray-400 text-sm italic">Or</span>
        <hr class="flex-grow border-t border-gray-300 dark:border-gray-600">
      </div>

      <!-- Email Password Section -->
      <form class="w-full space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input type="email" id="email" placeholder="Your email address" autocomplete="email"
            class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-violet-400 focus:border-transparent 
            bg-gray-50/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 
            transition-colors duration-200 ease-in-out font-medium shadow-sm leading-tight"
            style="mix-blend-mode: multiply; dark:mix-blend-mode: screen; filter: saturate(1.1);">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" placeholder="Password" autocomplete="current-password"
            class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-violet-400 focus:border-transparent 
            bg-gray-50/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 
            transition-colors duration-200 ease-in-out font-medium shadow-sm leading-tight"
            style="mix-blend-mode: multiply; dark:mix-blend-mode: screen; filter: saturate(1.1);">
        </div>
        <button type="submit" class="w-full px-6 py-3 rounded-xl text-lg font-bold 
          bg-gradient-to-r from-pink-400 to-purple-500 text-white 
          hover:from-pink-500 hover:to-purple-600 
          dark:from-fuchsia-600 dark:to-violet-700 
          dark:hover:from-fuchsia-700 dark:hover:to-violet-800 
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5 mt-4 
          font-heading tracking-wide"
          style="background-image: linear-gradient(to right, #ec4899, #ec4899 50%, #8b5cf6 50%, #8b5cf6); background-size: 200% 100%; transition: background-position 0.3s cubic-bezier(0.4, 0, 0.2, 1); filter: saturate(1.2);"
          onmouseover="this.style.backgroundPosition = '-100% 0';" onmouseout="this.style.backgroundPosition = '0 0';">
          Sign In
        </button>
      </form>

      <div class="mt-6 text-center text-sm md:text-base text-gray-600 dark:text-gray-300">
        Don't have an account? 
        <a href="#" class="text-violet-600 dark:text-purple-400 hover:underline font-semibold">
          Sign Up
        </a>
      </div>

    </div>
  </div>
</div>

<style>
  /* Adding custom font definitions for more artistic feel */
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;500;700&display=swap');

  .font-serif {
    font-family: 'Playfair Display', serif;
  }
  .font-sans {
    font-family: 'Quicksand', sans-serif;
  }
  .font-heading {
    font-family: 'Quicksand', sans-serif;
  }
</style>

Neon_Glow_Navbar_Music_Audio

음악/오디오 플랫폼을 위한 복잡하고 반응이 빠른 탐색 모음 구성 요소로, 네온/글로우 효과와 따뜻한 무채색 구성표를 특징으로 합니다. 다크 모드 지원 및 대화형 요소가 포함되어 있습니다.

열다 미리 보기

                <nav class="bg-gradient-to-r from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950/50 shadow-lg px-4 py-3 md:py-4 transition-all duration-300">
  <div class="container mx-auto flex items-center justify-between flex-wrap">
    <!-- Logo and Home Link -->
    <div class="flex items-center flex-shrink-0 text-stone-800 dark:text-orange-100 mr-6">
      <svg class="fill-current h-8 w-8 mr-2 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9a9 9 0 00-9-9zm0 16a7 7 0 110-14 7 7 0 010 14zM12 8a1 1 0 00-1 1v4a1 1 0 002 0V9a1 1 0 00-1-1z"/>
      </svg>
      <span class="font-black text-xl tracking-tight text-stone-800 dark:text-orange-100 drop-shadow-[0_0_5px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_8px_rgba(253,186,116,0.9)]">Pulse<span class="text-orange-400 dark:text-amber-300">Tune</span></span>
    </div>

    <!-- Mobile Menu Button -->
    <div class="block lg:hidden">
      <button class="flex items-center px-3 py-2 border rounded text-stone-500 border-stone-400 hover:text-orange-600 hover:border-orange-600 dark:text-orange-300 dark:border-orange-400 dark:hover:text-amber-500 dark:hover:border-amber-500 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-400 group">
        <svg class="fill-current h-3 w-3 drop-shadow-[0_0_3px_rgba(251,191,36,0.7)] dark:drop-shadow-[0_0_5px_rgba(253,186,116,0.9)] group-hover:text-orange-600 dark:group-hover:text-amber-500" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
      </button>
    </div>

    <!-- Nav Links (hidden by default on mobile, shown on large screens) -->
    <div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden transition-all duration-300" data-target-id="navbar-menu">
      <div class="text-sm lg:flex-grow mt-4 lg:mt-0">
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Home
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Browse
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 mr-4 font-medium transition-colors duration-200 relative group">
          Playlists
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
        <a href="#" class="block mt-4 lg:inline-block lg:mt-0 px-4 py-2 text-stone-700 dark:text-orange-200 hover:text-orange-600 dark:hover:text-amber-400 font-medium transition-colors duration-200 relative group">
          Radio
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 dark:bg-amber-300 origin-left transform scale-x-0 transition-transform duration-300 group-hover:scale-x-100 glow-on-hover"></span>
        </a>
      </div>

      <!-- Search Bar and User Profile -->
      <div class="flex items-center mt-4 lg:mt-0 space-x-4">
        <!-- Search Bar -->
        <div class="relative">
          <input type="text" placeholder="Search music..." class="bg-stone-50 dark:bg-orange-900 border border-stone-300 dark:border-orange-800 rounded-full py-2 pl-10 pr-4 text-sm text-stone-800 dark:text-orange-100 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 focus:border-transparent transition-all duration-200 shadow-sm drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-stone-400 dark:text-orange-400" 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>
        </div>

        <!-- User Profile Dropdown -->
        <div class="relative group">
          <button class="flex items-center space-x-2 text-stone-700 dark:text-orange-200 focus:outline-none">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-orange-400 dark:border-amber-300 glow-on-pfp transition-transform duration-200 hover:scale-105">
            <span class="hidden md:block font-medium text-sm text-stone-700 dark:text-orange-200">Jane Doe</span>
            <svg class="h-4 w-4 ml-1 text-stone-500 dark:text-orange-300 group-hover:rotate-180 transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
          </button>
          <!-- Dropdown Menu -->
          <div class="absolute right-0 mt-2 w-48 bg-stone-50 dark:bg-orange-900 rounded-md shadow-lg py-1 z-20 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform scale-95 group-hover:scale-100 origin-top-right border border-stone-200 dark:border-orange-850">
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Settings</a>
            <div class="border-t border-stone-200 dark:border-orange-800 my-1"></div>
            <a href="#" class="block px-4 py-2 text-sm text-stone-700 dark:text-orange-200 hover:bg-stone-100 dark:hover:bg-orange-800 transition-colors duration-200">Sign Out</a>
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button id="dark-mode-toggle" aria-label="Toggle dark mode" class="p-2 rounded-full text-stone-600 dark:text-orange-300 bg-stone-100 dark:bg-orange-800 hover:bg-stone-200 dark:hover:bg-orange-700 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-orange-400 dark:focus:ring-amber-300 drop-shadow-[0_0_3px_rgba(251,191,36,0.3)] dark:drop-shadow-[0_0_6px_rgba(253,186,116,0.6)]">
          <svg class="h-5 w-5 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg class="h-5 w-5 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.368A5.99 5.99 0 0110 18a5.99 5.99 0 01-4.541-2.368l-.707.707a1 1 0 001.414 1.414L10 18.414l3.828 3.828a1 1 0 001.414-1.414l-.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm15.364 6.364l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4.636 4.636l-.707-.707a1 1 0 011.414-1.414l.707.707a1 1 0 01-1.414 1.414z"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

<style>
  /* This CSS is for demonstration of glow effects where Tailwind classes aren't sufficient. */
  /* In a real project, consider integrating these via plugins if needed or as direct CSS for unique effects. */
  .glow-on-hover {
    box-shadow: 0 0 5px rgba(251, 191, 36, 0.5), 0 0 10px rgba(251, 191, 36, 0.3);
    transition: all 0.3s ease-in-out;
  }
  .dark .glow-on-hover {
    box-shadow: 0 0 8px rgba(253, 186, 116, 0.7), 0 0 15px rgba(253, 186, 116, 0.5);
  }
  .group:hover .glow-on-hover {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8), 0 0 15px rgba(251, 191, 36, 0.5);
  }
  .dark .group:hover .glow-on-hover {
    box-shadow: 0 0 10px rgba(253, 186, 116, 0.9), 0 0 20px rgba(253, 186, 116, 0.7);
  }

  .glow-on-pfp {
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  }
  .dark .glow-on-pfp {
    box-shadow: 0 0 10px rgba(253, 186, 116, 0.8);
  }
  .dark .glow-on-pfp {
     filter: drop-shadow(0 0 8px rgba(253, 186, 116, 0.8));
  }

  /* Basic JS for mobile menu and dark mode toggle */
  /* Add this script in your actual HTML, likely at the end of body */
  /*
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const mobileMenuButton = document.querySelector('button[aria-label="Toggle navigation"]');
      const navbarMenu = document.querySelector('[data-target-id="navbar-menu"]');

      if (mobileMenuButton && navbarMenu) {
        mobileMenuButton.addEventListener('click', () => {
          navbarMenu.classList.toggle('hidden');
        });
      }

      const darkModeToggle = document.getElementById('dark-mode-toggle');
      if (darkModeToggle) {
        darkModeToggle.addEventListener('click', () => {
          document.documentElement.classList.toggle('dark');
          localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
        });

        // Check for saved theme in localStorage
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      }
    });
  </script>
  */
</style>

드롭다운 메뉴 컴포넌트

레트로/빈티지 색상 팔레트가 있는 단순하고 유기적/자연에서 영감을 받은 드롭다운 메뉴 구성 요소로 제조/산업 회사에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다 미리 보기

                <div class="relative inline-block text-left font-serif">
  <button id="dropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-stone-100 text-sm font-medium text-amber-900 hover:bg-stone-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-amber-500 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900 dark:focus:ring-amber-400 opacity-90 transition-all duration-300 ease-in-out transform hover:scale-105">
    <svg class="-ml-1 mr-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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>
    <span>Menu Options</span>
    <svg class="-mr-1 ml-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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>

  <!-- Dropdown panel, show/hide based on dropdown state. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-stone-50 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none dark:bg-gray-700 dark:divide-gray-600 opacity-0 scale-95 pointer-events-none transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-0">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM13 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM13 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z" />
        </svg>
        Production Overview
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-1">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M6.267 19.510A2.898 2.898 0 0010 18c.95 0 1.85-.357 2.584-.96a1.597 1.597 0 011.758 0C13.565 17.59 14 17 14 17H6s-1.57-.406-2.584-1.96c-.734-.603-1.634-.96-2.584-.96H0zM14 6a2 2 0 00-2-2H8a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V6z" clip-rule="evenodd" />
        </svg>
        Quality Control
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-2">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 7a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Supply Chain
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-3">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-2 2a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
        Maintenance Log
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-4">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 18V6zm4 6a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Reports
      </a>
    </div>
  </div>
</div>

<script>
  // This script is for demonstration purposes to toggle the dropdown.
  // In a real application, you would use a JavaScript framework or library.
  document.addEventListener('DOMContentLoaded', function() {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    dropdownButton.addEventListener('click', function() {
      const isExpanded = dropdownMenu.classList.contains('scale-100');
      if (isExpanded) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      } else {
        dropdownMenu.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
        dropdownMenu.classList.add('opacity-100', 'scale-100', 'pointer-events-auto');
      }
    });

    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function(event) {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      }
    });
  });
</script>

카드 구성 요소

예약/예약 시스템을 위한 미니멀하고 평평한 디자인의 카드 구성 요소로, 그라데이션 무지개 색 구성표를 특징으로 합니다. 반응이 빠르고 다크 모드 지원이 포함되어 있으며 깔끔한 모양을 위해 단순한 요소를 사용합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">

    <!-- Card 1: Available Time Slot -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Morning Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white shadow-md">Available</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">09:00 AM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 60 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 hover:from-purple-600 hover:via-pink-600 hover:to-red-600 shadow-lg">
          Book Now
        </button>
      </div>
    </div>

    <!-- Card 2: Fully Booked -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Afternoon Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 text-white shadow-md">Fully Booked</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-400 dark:text-gray-600">02:00 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 90 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold cursor-not-allowed opacity-60
                       bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 shadow-lg">
          View Details
        </button>
      </div>
    </div>

    <!-- Card 3: Next Day Availability -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Evening Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 text-white shadow-md">Limited</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Thursday, October 27, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">07:30 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 45 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500 hover:from-teal-600 hover:via-cyan-600 hover:to-blue-600 shadow-lg">
          Pre-book
        </button>
      </div>
    </div>

  </div>
</div>

Brutalist_Grayscale_Checkout_Form

포트폴리오 표시에 최적화된 회색조 색 구성표가 있는 복잡한 브루탈리즘 스타일의 체크아웃 양식 구성 요소입니다. 고대비, 특이한 레이아웃, 완전한 반응성 및 다크 모드 지원이 특징입니다.

열다 미리 보기

                <div class="min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 font-mono">
  <div class="max-w-6xl mx-auto border-4 border-black dark:border-white shadow-xl dark:shadow-[0_0_20px_rgba(255,255,255,0.2)] bg-white dark:bg-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
      <!-- Left Column: Order Summary / Image -->
      <div class="relative col-span-1 border-b-4 md:border-b-0 md:border-r-4 border-black dark:border-white p-6 md:p-8 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
        <img src="https://picsum.photos/seed/brutalism/600/800" alt="Abstract Brutalist Structure" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-multiply group-hover:scale-105 transition-transform duration-500 ease-in-out">
        <div class="relative z-10">
          <h2 class="text-4xl sm:text-5xl font-extrabold mb-8 uppercase leading-none border-b-4 border-black dark:border-white pb-3 sm:pb-5">
            <span class="block">Your</span>
            <span class="block">Order</span>
            <span class="block">Summary</span>
          </h2>

          <div class="space-y-6 mb-8">
            <div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
              <div class="flex flex-col">
                <span class="font-bold text-lg">Product X-1</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">SKU: BRUX-001</span>
              </div>
              <span class="font-bold text-lg">$199.00</span>
            </div>
            <div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
              <div class="flex flex-col">
                <span class="font-bold text-lg">Design Service</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">Consultation Fee</span>
              </div>
              <span class="font-bold text-lg">$50.00</span>
            </div>
            <div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
              <div class="flex flex-col">
                <span class="font-bold text-lg">Material Pack Beta</span>
                <span class="text-sm text-gray-700 dark:text-gray-300">Edition M-23</span>
              </div>
              <span class="font-bold text-lg">$75.00</span>
            </div>
          </div>

          <div class="border-t-4 border-r-4 border-black dark:border-white pt-4 md:pt-6">
            <div class="flex justify-between items-center mb-2">
              <span class="text-lg uppercase text-gray-700 dark:text-gray-300">Subtotal</span>
              <span class="text-lg font-bold">$324.00</span>
            </div>
            <div class="flex justify-between items-center mb-2">
              <span class="text-lg uppercase text-gray-700 dark:text-gray-300">Shipping</span>
              <span class="text-lg font-bold">$15.00</span>
            </div>
            <div class="flex justify-between items-center mb-6">
              <span class="text-lg uppercase text-gray-700 dark:text-gray-300">Tax (8%)</span>
              <span class="text-lg font-bold">$25.92</span>
            </div>
            <div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
              <span class="text-3xl font-extrabold uppercase">Total</span>
              <span class="text-3xl font-extrabold">$364.92</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column: Form -->
      <div class="col-span-1 md:col-span-2 p-6 md:p-8">
        <h1 class="text-4xl sm:text-5xl font-extrabold mb-8 uppercase leading-none border-b-4 border-b-black dark:border-b-white pb-3 sm:pb-5">
          <span class="block">Complete</span>
          <span class="block">Your</span>
          <span class="block">Purchase</span>
        </h1>

        <form class="space-y-8">
          <!-- Contact Information -->
          <div>
            <h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Contact Info</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
              <div>
                <label for="email" class="block text-sm font-bold uppercase mb-2">Email Address</label>
                <input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="phone" class="block text-sm font-bold uppercase mb-2">Phone Number <span class="text-gray-600 dark:text-gray-400 text-xs">(Optional)</span></label>
                <input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
            </div>
          </div>

          <!-- Shipping Address -->
          <div>
            <h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Shipping Address</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
              <div>
                <label for="first_name" class="block text-sm font-bold uppercase mb-2">First Name</label>
                <input type="text" id="first_name" name="first_name" placeholder="John" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="last_name" class="block text-sm font-bold uppercase mb-2">Last Name</label>
                <input type="text" id="last_name" name="last_name" placeholder="Doe" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
            </div>
            <div class="mb-6">
              <label for="address1" class="block text-sm font-bold uppercase mb-2">Address Line 1</label>
              <input type="text" id="address1" name="address1" placeholder="123 Brutalist Blvd" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            </div>
            <div class="mb-6">
              <label for="address2" class="block text-sm font-bold uppercase mb-2">Address Line 2 <span class="text-gray-600 dark:text-gray-400 text-xs">(Apt, Suite, Etc.)</span></label>
              <input type="text" id="address2" name="address2" placeholder="Apt 4B" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
              <div>
                <label for="city" class="block text-sm font-bold uppercase mb-2">City</label>
                <input type="text" id="city" name="city" placeholder="Metropolis" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="state" class="block text-sm font-bold uppercase mb-2">State / Province</label>
                <input type="text" id="state" name="state" placeholder="NY" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="zip" class="block text-sm font-bold uppercase mb-2">Zip / Postal Code</label>
                <input type="text" id="zip" name="zip" placeholder="10001" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
            </div>
          </div>

          <!-- Payment Information -->
          <div>
            <h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Payment Info</h3>
            <div class="mb-6">
              <label for="card_number" class="block text-sm font-bold uppercase mb-2">Card Number</label>
              <input type="text" id="card_number" name="card_number" placeholder="•••• •••• •••• ••••" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
              <div>
                <label for="expiry_date" class="block text-sm font-bold uppercase mb-2">Expiry Date</label>
                <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-bold uppercase mb-2">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="123" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
              </div>
              <div class="hidden sm:block"></div>
            </div>
          </div>

          <!-- Billing Address Checkbox -->
          <div class="flex items-center mt-8 -ml-1">
            <input type="checkbox" id="same_as_shipping" name="same_as_shipping" checked class="w-6 h-6 checked:bg-black dark:checked:bg-white checked:border-black dark:checked:border-white border-2 border-black dark:border-white focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 appearance-none inline-block align-middle relative after:content-[''] after:inline-block after:w-[calc(100%-4px)] after:h-[calc(100%-4px)] after:left-[2px] after:top-[2px] after:absolute after:bg-gray-900 dark:after:bg-gray-100 transition-colors duration-200">
            <label for="same_as_shipping" class="ml-3 text-lg font-bold uppercase cursor-pointer">Billing address same as shipping</label>
          </div>

          <!-- Submit Button -->
          <button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black text-2xl font-extrabold uppercase py-5 mt-10 border-4 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 hover:text-white dark:hover:text-black transition-colors duration-300 transform active:scale-98 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 relative group overflow-hidden">
            <span class="relative z-10">PROCESS PAYMENT</span>
            <span class="absolute inset-0 bg-gray-500 dark:bg-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
          </button>

          <p class="text-center text-sm text-gray-600 dark:text-gray-400 pt-4">
            By clicking 'PROCESS PAYMENT', you agree to our <a href="#" class="underline font-bold hover:text-gray-800 dark:hover:text-gray-200">terms and conditions</a>.
          </p>
        </form>

        <div class="mt-12 pt-8 border-t-2 border-black dark:border-white text-center">
          <p class="text-xl font-bold uppercase mb-4">Secured by:</p>
          <div class="flex justify-center items-center space-x-6">
            <img src="https://picsum.photos/seed/security1/80/40" alt="Security Badge 1" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
            <img src="https://picsum.photos/seed/security2/80/40" alt="Security Badge 2" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
            <img src="https://picsum.photos/seed/security3/80/40" alt="Security Badge 3" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

LuxuryFoodMaps구성 요소

캔디 테마의 색 구성표가 있는 우아하고 반응이 빠른 음식/레스토랑 지도 구성 요소로, 다크 모드 지원을 포함하여 데스크톱, 태블릿 및 모바일에 적합합니다. 눈에 잘 띄는 지도 영역과 프리미엄 레스토랑 위치 목록이 있습니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-800 dark:text-gray-100 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-850 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in transition-all duration-500 transform hover:scale-[1.005]">
    <div class="md:flex md:h-[600px] lg:h-[700px]">

      <!-- Left Section: Map -->
      <div class="md:w-3/5 bg-gray-200 dark:bg-gray-700 h-96 md:h-auto overflow-hidden relative">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.259902636712!2d-73.98565158459423!3d40.74844057932785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a542e7!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1678912345678!5m2!1sen!2sus"
          width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
          referrerpolicy="no-referrer-when-downgrade" aria-label="Interactive map showing restaurant locations.">
        </iframe>
        <div class="absolute top-4 left-4 p-3 bg-white dark:bg-gray-900 rounded-full shadow-lg flex items-center space-x-2 text-sm font-semibold opacity-90 backdrop-blur-sm">
            <svg class="w-5 h-5 text-pink-500" 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
            <span class="text-gray-700 dark:text-gray-300">Explore nearby flavors</span>
        </div>
      </div>

      <!-- Right Section: Restaurant List -->
      <div class="md:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 tracking-tight leading-tight">
            <span class="block">Sweet Spots.</span>
            <span class="block text-purple-600 dark:text-purple-400">Savory Treats.</span>
          </h2>
          <p class="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-8">
            Discover premium culinary experiences near you. From delightful desserts to gourmet dinners.
          </p>

          <div class="space-y-6 max-h-96 md:max-h-[calc(100vh-300px)] overflow-y-auto pr-2 scrollbar-thumb-pink-300 scrollbar-track-purple-100 dark:scrollbar-thumb-pink-700 dark:scrollbar-track-purple-900 scrollbar-w-2">

            <!-- Restaurant Card 1 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-pink-50 dark:bg-gray-700 border border-transparent hover:border-pink-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=1" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">The Sugar Plum Bistro</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">123 Candyland Rd, Suite A</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★★</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.9)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-pink-300">
                  View Details
                </button>
              </div>
            </div>

            <!-- Restaurant Card 2 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-purple-50 dark:bg-gray-700 border border-transparent hover:border-purple-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=2" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Mint & Basil Eatery</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">456 Green Street, Level 2</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★☆</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.5)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-purple-600 hover:to-indigo-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-300">
                  View Details
                </button>
              </div>
            </div>

            <!-- Restaurant Card 3 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-blue-50 dark:bg-gray-700 border border-transparent hover:border-blue-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=3" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Gourmet Glaze Cafe</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">789 Sweet Avenue, Unit B</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★★</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.8)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-blue-500 to-pink-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-blue-600 hover:to-pink-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
                  View Details
                </button>
              </div>
            </div>
            
            <!-- Restaurant Card 4 -->
            <div class="flex items-start space-x-4 p-4 rounded-xl shadow-md bg-green-50 dark:bg-gray-700 border border-transparent hover:border-green-300 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-[1.01]">
              <img src="https://picsum.photos/80/80?random=4" alt="Restaurant Image" class="w-20 h-20 object-cover rounded-lg shadow-sm flex-shrink-0">
              <div>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Jelly Bean Junction</h3>
                <p class="text-gray-600 dark:text-gray-300 text-sm">101 Lollipop Lane, Apt 1</p>
                <div class="flex items-center mt-1">
                  <span class="text-yellow-500 text-lg">★★★★☆</span>
                  <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">(4.6)</span>
                </div>
                <button class="mt-3 px-4 py-2 bg-gradient-to-r from-green-500 to-blue-500 text-white text-sm font-semibold rounded-full shadow-lg hover:from-green-600 hover:to-blue-600 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-green-300">
                  View Details
                </button>
              </div>
            </div>

          </div>
        </div>

        <div class="mt-8 flex justify-center">
          <button class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white text-lg font-bold rounded-full shadow-lg hover:from-pink-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700">
            Find More Restaurants
          </button>
        </div>
      </div>

    </div>
  </div>

</div>

<!-- Custom scrollbar styles for demonstration/specificity -- provided it's configured in Tailwind config for utility classes -->
<style>
  /* For Webkit browsers (Chrome, Safari) */
  .scrollbar-w-2::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar-track-purple-100::-webkit-scrollbar-track {
    background: #f3e8ff;
  }

  .scrollbar-thumb-pink-300::-webkit-scrollbar-thumb {
    background-color: #fbcfe8;
    border-radius: 20px;
    border: 2px solid #f3e8ff;
  }

  .dark .scrollbar-track-purple-900::-webkit-scrollbar-track {
    background: #2a0c4e;
  }

  .dark .scrollbar-thumb-pink-700::-webkit-scrollbar-thumb {
    background-color: #be185d;
    border-radius: 20px;
    border: 2px solid #2a0c4e;
  }
</style>

Retro_Vintage_Sticky_Navigation_Component

이벤트 또는 컨퍼런스 웹 사이트를 위해 설계된 복잡한 레트로/빈티지에서 영감을 받은 스티커 탐색 모음으로, 부드러운 파스텔 색상, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다. 여기에는 로고, 탐색 링크, 클릭 유도문안 버튼 및 검색 아이콘이 포함됩니다.

열다 미리 보기

                <header class="sticky top-0 z-50 w-full bg-pink-100/90 backdrop-blur-sm shadow-md transition-colors duration-300 dark:bg-zinc-800/90">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between font-mono text-pink-700 dark:text-pink-300">
    <div class="flex items-center space-x-4">
      <!-- Logo / Event Title -->
      <a href="#" class="text-2xl font-bold tracking-tight uppercase group dark:text-pink-100">
        <span class="block transform -rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-600 dark:text-pink-200">Future</span>
        <span class="block transform rotate-6 group-hover:rotate-0 transition-transform duration-200 ease-in-out text-pink-800 dark:text-pink-400">Fest '92</span>
      </a>
    </div>

    <!-- Mobile Menu Button -->
    <div class="lg:hidden">
      <button id="mobile-menu-button" class="p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400">
        <svg class="w-7 h-7 text-pink-700 dark:text-pink-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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation & CTA -->
    <div class="hidden lg:flex items-center space-x-8">
      <ul class="flex space-x-6 text-lg">
        <li><a href="#schedule" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Schedule
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#speakers" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Speakers
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#tickets" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Tickets
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#venue" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          Venue
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
        <li><a href="#faq" class="hover:text-pink-900 group relative overflow-hidden transition-all duration-300 dark:hover:text-pink-500">
          FAQ
          <span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-700 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left duration-300 dark:bg-pink-300"></span>
        </a></li>
      </ul>
      <a href="#buytickets" class="px-6 py-2 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
        <span class="inline-block transform skew-x-12">Get Tickets!</span>
      </a>
      <button class="p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
        <svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500" 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>
      </button>
    </div>
  </nav>

  <!-- Mobile Menu (hidden by default) -->
  <div id="mobile-menu" class="hidden lg:hidden bg-pink-50 dark:bg-zinc-700 px-4 py-4 border-t border-pink-200 dark:border-zinc-600 text-center font-mono">
    <ul class="flex flex-col space-y-4 text-lg text-pink-700 dark:text-pink-300">
      <li><a href="#schedule" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Schedule</a></li>
      <li><a href="#speakers" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Speakers</a></li>
      <li><a href="#tickets" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Tickets</a></li>
      <li><a href="#venue" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">Venue</a></li>
      <li><a href="#faq" class="block py-2 hover:bg-pink-100 dark:hover:bg-zinc-600 rounded-md transition-colors">FAQ</a></li>
    </ul>
    <a href="#buytickets" class="mt-6 inline-block w-full max-w-xs px-6 py-3 bg-pink-500 text-white font-bold rounded-full shadow-lg transform -skew-x-12 hover:scale-105 hover:bg-pink-600 transition-all duration-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-50">
      <span class="inline-block transform skew-x-12">Get Tickets!</span>
    </a>
    <button class="mt-4 p-2 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:focus:ring-pink-400 rounded-full group">
      <svg class="w-6 h-6 text-pink-700 group-hover:text-pink-900 transition-colors duration-200 dark:text-pink-300 dark:group-hover:text-pink-500 mx-auto" 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>
    </button>
  </div>
</header>

<script>
  // Basic JavaScript for mobile menu toggle (required for interaction)
  document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
      mobileMenuButton.addEventListener('click', function() {
        mobileMenu.classList.toggle('hidden');
      });

      // Close mobile menu when a link is clicked
      const menuLinks = mobileMenu.querySelectorAll('a');
      menuLinks.forEach(link => {
        link.addEventListener('click', function() {
          mobileMenu.classList.add('hidden');
        });
      });
    }
  });
</script>

E-commerce Header 구성 요소

머티리얼 디자인에서 영감을 받은 반응형의 생동감 넘치는 전자상거래 웹사이트를 위한 헤더 컴포넌트로, 탐색, 검색, 사용자 액션을 제공합니다. 다크 모드를 지원합니다.

열다 미리 보기

                <header class="bg-gradient-to-r from-orange-500 to-red-600 dark:from-gray-900 dark:to-gray-800 shadow-lg relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between">
    <!-- Logo -->
    <a href="#" class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7l-3 4m0 0l-3-4m3 4v-4m5 4l2 2m0 0l2 2m-2-2l-2 2m2-2l2-2M11 9L7 5m0 0L3 9m4-4l4 4" />
      </svg>
      <span class="text-white text-2xl font-bold tracking-tight hidden sm:block">ShopSwift</span>
    </a>

    <!-- Search Bar (Desktop) -->
    <div class="flex-grow mx-4 hidden md:block">
      <div class="relative">
        <input type="text" placeholder="Search for products..." class="w-full py-2 pl-10 pr-4 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-white focus:bg-white focus:text-gray-900 transition-all duration-300">
        <svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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" />
        </svg>
      </div>
    </div>

    <!-- User Actions & Mini-Cart -->
    <nav class="flex items-center space-x-4">
      <!-- Mobile Search Icon -->
      <button class="md:hidden p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200" aria-label="Search">
        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </button>

      <a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Favorites">
        <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">3</span>
      </a>
      <a href="#" class="p-2 rounded-full text-white hover:bg-white hover:bg-opacity-20 transition-all duration-200 relative" aria-label="Shopping Cart">
        <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full dark:bg-red-700">7</span>
      </a>
      <a href="#" class="p-1 rounded-full overflow-hidden border-2 border-white hover:border-blue-300 transition-all duration-200" aria-label="User Profile">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="h-8 w-8 rounded-full object-cover">
      </a>
    </nav>
  </div>

  <!-- Main Navigation (Desktop) -->
  <nav class="hidden md:block bg-gradient-to-r from-orange-600 to-red-700 dark:from-gray-800 dark:to-gray-700 py-2 shadow-inner">
    <div class="container mx-auto px-4 flex justify-center space-x-8 text-white font-medium">
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Categories</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Best Sellers</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Deals</a>
      <a href="#" class="hover:text-amber-200 dark:hover:text-gray-300 transition-colors duration-200 py-1 border-b-2 border-transparent hover:border-amber-200 dark:hover:border-gray-300">Support</a>
    </div>
  </nav>
</header>

자연에서 영감을 받은 유기농 검색창

자연에서 영감을 받은 유기적 디자인과 무지개 그라데이션이 있는 간단하고 반응이 빠른 검색 상자 구성 요소로 비즈니스 또는 기업 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 via-sky-100 to-green-100 dark:from-gray-900 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl bg-white dark:bg-gray-800 transition-all duration-300 ease-in-out transform hover:scale-105">
    <div class="relative p-5 sm:p-6 md:p-8 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-700 dark:via-yellow-700 dark:to-green-700 animate-gradient-xy rounded-t-3xl">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-bold text-white text-center drop-shadow-md pb-2">
        Find Your Harmony
      </h2>
      <p class="text-sm sm:text-base text-white text-center opacity-90">
        Explore our natural solutions.
      </p>
    </div>
    <div class="p-5 sm:p-6 md:p-8 relative -top-3 bg-white dark:bg-gray-800 rounded-b-3xl">
      <form class="relative flex items-center">
        <label for="search-input" class="sr-only">Search for products or solutions</label>
        <input
          id="search-input"
          type="text"
          placeholder="Search for products, services..."
          class="w-full py-3 pl-4 pr-12 text-base rounded-full border-2 border-gray-300 dark:border-gray-600 focus:border-green-500 dark:focus:border-green-400 focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 outline-none text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 transition-all duration-200 shadow-inner dark:shadow-none"
          aria-label="Search input field"
        />
        <button
          type="submit"
          class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gradient-to-br from-green-400 to-blue-500 text-white dark:from-green-600 dark:to-blue-700 hover:from-green-500 hover:to-blue-600 dark:hover:from-green-700 dark:hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-600 transition-all duration-200 ease-in-out transform hover:scale-110 shadow-lg"
          aria-label="Search button"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
        </button>
      </form>
      <p class="text-center text-xs text-gray-500 dark:text-gray-400 mt-4">
        <small>Discover nature's finest solutions for your business.</small>
      </p>
    </div>
  </div>
</div>

<style>
/* Define the keyframes for the gradient animation */
@keyframes gradient-xy {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* Apply the animation */
.animate-gradient-xy {
  background-size: 400% 400%; /* Make the background larger than the element */
  animation: gradient-xy 15s ease infinite alternate;
}
</style>

1 ... 47 48 49 50 51 ... 335

검색 구성 요소

카테고리

모든 구성 요소