검색 구성 요소

모든 구성 요소

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

Chat Window 구성 요소

부동산 플랫폼에 적합한 복잡하고 트라이어딕 색상의 마이크로 인터랙션 중심의 채팅 창 구성 요소입니다. 대화 목록, 메시지 풍선이 있는 활성 채팅 영역, 대화형 입력 필드를 특징으로 하며, 모두 완벽하게 반응하고 다크 모드를 지원합니다.

열다 미리 보기

                <div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="relative w-full max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex flex-row-reverse transform transition-all duration-300 ease-in-out hover:shadow-2xl">

    <!-- Chat Details / Active Chat Area -->
    <div class="flex-1 flex flex-col h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
      <!-- Chat Header -->
      <div class="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
        <div class="flex items-center space-x-3">
          <button class="md:hidden p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-offset-gray-800">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
          </button>
          <div class="relative">
            <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover border-2 border-green-400 dark:border-green-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name">
            <span class="absolute bottom-0 right-0 block w-3 h-3 bg-green-500 rounded-full ring-2 ring-white dark:ring-gray-800"></span>
          </div>
          <div>
            <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">Online</p>
          </div>
        </div>
        <div class="flex space-x-3">
          <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.5-2.5-2.5-2.5m-3 3l2.5 2.5m-2.5 2.5L10.5 9m-2.5 2.5L10.5 9m4.5 4.5l-2.5 2.5-2.5-2.5m3-3l-2.5 2.5m-2.5-2.5l2.5-2.5-2.5-2.5m-3-3l2.5-2.5-2.5-2.5"></path></svg>
          </button>
          <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pulse-once">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- Chat Messages -->
      <div class="flex-1 p-4 sm:p-6 overflow-y-auto custom-scrollbar-thin space-y-4 bg-gray-50 dark:bg-gray-850">

        <!-- Agent Message -->
        <div class="flex items-end space-x-3 group animate-slide-in-left">
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
          <div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Hello! I'm John, your agent for the property at 123 Elm St. How can I assist you today?</p>
            <span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:00 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
        </div>

        <!-- User Message -->
        <div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
          <div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Hi John! I'm interested in scheduling a virtual tour for that property. When are you available?</p>
            <span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:05 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        </div>

        <!-- Agent Message with Property Card -->
        <div class="flex items-end space-x-3 group animate-slide-in-left">
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Avatar">
          <div class="bg-green-100 dark:bg-green-700 p-3 rounded-tr-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-gray-800 dark:text-gray-50 relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm mb-2">Great! How about this Thursday at 2 PM PST? Also, here are some details about the property:</p>
            <!-- Property Card in Chat -->
            <div class="bg-white dark:bg-gray-900 rounded-lg overflow-hidden shadow-md border border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row mb-2">
              <img src="https://picsum.photos/300/200?random=1" alt="Property Image" class="w-full sm:w-24 md:w-32 h-24 sm:h-auto object-cover">
              <div class="p-3 flex-1">
                <h4 class="font-semibold text-gray-900 dark:text-gray-100 text-base">Modern Family Home</h4>
                <p class="text-gray-600 dark:text-gray-300 text-sm">123 Elm St, Springfield</p>
                <p class="text-pink-600 dark:text-pink-400 text-base font-bold mt-1">$550,000</p>
                <button class="mt-2 text-blue-600 dark:text-blue-400 hover:underline text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md transition-colors duration-200">View Details</button>
              </div>
            </div>
            <span class="block text-xs text-right text-gray-500 dark:text-gray-300 mt-1">10:08 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -right-8 space-x-1.5 animation-fade-in-right">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
        </div>

        <!-- User Message with Confirmation -->
        <div class="flex items-end justify-end space-x-3 group animate-slide-in-right">
          <div class="bg-blue-500 dark:bg-blue-600 p-3 rounded-tl-xl rounded-bl-xl rounded-br-xl max-w-sm lg:max-w-md text-white relative group-hover:scale-[1.02] transition-transform duration-150">
            <p class="text-sm">Thursday at 2 PM works perfectly! Thank you for the property details.</p>
            <span class="block text-xs text-right text-blue-100 dark:text-blue-200 mt-1">10:10 AM</span>
            <div class="absolute hidden group-hover:flex bottom-1 -left-8 space-x-1.5 animation-fade-in-left">
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-pink-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg></button>
              <button class="p-1 bg-gray-200 dark:bg-gray-700 rounded-full text-green-500 hover:scale-110 transition-transform duration-100 drop-shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9v3a2 2 0 01-2 2H8l-4 4V8c0-1.1.9-2 2-2h10a2 2 0 012 2zm-6-2H6v2h6V7zm4 4H6v2h10v-2z"></path></svg></button>
            </div>
          </div>
          <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        </div>

      </div>

      <!-- Chat Input -->
      <div class="p-4 sm:p-5 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex items-center space-x-3">
        <button class="p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 animate-jiggle">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        </button>
        <input type="text" placeholder="Type your message..." class="flex-1 p-3 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
        <button class="p-3 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-all duration-200 ease-in-out transform hover:scale-105 active:scale-95 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-800 animate-pop-in">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat List / Sidebar -->
    <div class="hidden md:flex flex-col w-72 lg:w-80 border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex-none h-[80vh] md:h-[calc(100vh-6rem)] lg:h-[calc(100vh-8rem)]">
      <!-- Search and New Chat -->
      <div class="p-4 sm:p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
        <div class="relative">
          <input type="text" placeholder="Search chats..." class="w-full p-2 pl-10 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out focus:scale-[1.01] shadow-sm">
          <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-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>
        <button class="mt-3 w-full bg-pink-500 text-white py-2 rounded-lg hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-offset-gray-800 transform active:scale-98 animate-button-pop">
          + New Chat
        </button>
      </div>

      <!-- Conversations List -->
      <div class="flex-1 overflow-y-auto custom-scrollbar-thin">
        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 relative group active:bg-blue-50 dark:active:bg-blue-900 border-l-4 border-l-blue-500 dark:border-l-blue-600 animate-fade-in-up">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-blue-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/men/45.jpg" alt="John Doe">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">John Doe</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Hi! How can I assist you today?</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">10:10 AM</p>
          <div class="absolute hidden group-hover:block right-4 top-1/2 -translate-y-1/2 transition-opacity duration-200 opacity-0 group-hover:opacity-100 animate-slide-in-right-sm">
            <span class="block w-2 h-2 bg-blue-500 dark:bg-blue-600 rounded-full"></span>
          </div>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 group animate-fade-in-up animate-delay-100">
          <img class="w-12 h-12 rounded-full object-cover border-2 border-transparent group-hover:border-green-400 transition-colors duration-200" src="https://randomuser.me/api/portraits/women/24.jpg" alt="Jane Smith">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">About the property at 456 Oak Ave...</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-200">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/33.jpg" alt="Robert Johnson">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Robert Johnson</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Can we reschedule the viewing?</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Mon</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-300">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/77.jpg" alt="Emily White">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Emily White</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">Looking for apartments in downtown.</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">Last week</p>
        </a>

        <a href="#" class="flex items-center p-4 sm:p-5 space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 animate-fade-in-up animate-delay-400">
          <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Agent Name">
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 dark:text-gray-100">Michael Brown</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 truncate">New property listed near campus!</p>
          </div>
          <p class="text-xs text-gray-500 dark:text-gray-400">2 weeks ago</p>
        </a>
      </div>
    </div>

  </div>
</div>

<style>
  /* Custom scrollbar for better aesthetics */
  .custom-scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(156 163 175 / 0.5);
    border-radius: 3px;
  }

  .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(156 163 175 / 0.7);
  }

  .custom-scrollbar-thin::-webkit-scrollbar-track {
    background-color: transparent;
  }

  /* Dark mode scrollbar */
  .dark .custom-scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(75 85 99 / 0.5);
  }

  .dark .custom-scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(75 85 99 / 0.7);
  }

  /* Keyframe animations for microinteractions */
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes slideInRightSm {
    from { opacity: 0; transform: translateX(-5px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeItIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes pulseOnce {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  @keyframes jiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
    75% { transform: rotate(-3deg); }
    100% { transform: rotate(0deg); }
  }

  @keyframes popIn {
    0% { transform: scale(0.8); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
  }

  @keyframes buttonPop {
    0% { transform: scale(1);}
    20% { transform: scale(1.02);}
    40% { transform: scale(0.98);}
    60% { transform: scale(1.01);}
    80% { transform: scale(0.99);}
    100% { transform: scale(1);}
  }

  /* Tailwind classes for animations */
  .animate-slide-in-left {
    animation: slideInLeft 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-slide-in-right-sm {
    animation: slideInRightSm 0.2s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.3s ease-out;
    animation-fill-mode: backwards;
  }

  .animate-delay-100 { animation-delay: 0.1s; }
  .animate-delay-200 { animation-delay: 0.2s; }
  .animate-delay-300 { animation-delay: 0.3s; }
  .animate-delay-400 { animation-delay: 0.4s; }

  .animation-fade-in-right {
    animation: fadeItIn 0.2s ease-out forwards, slideInRightSm 0.2s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after hover */
  }

  .animation-fade-in-left {
    animation: fadeItIn 0.2s ease-out forwards, slideInLeftSm 0.2s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after hover */
  }

  .animate-pulse-once {
    animation: pulseOnce 0.6s ease-in-out;
  }

  .animate-jiggle {
    animation: jiggle 0.4s ease-in-out;
  }

  .animate-pop-in {
    animation: popIn 0.3s ease-out;
  }

  .animate-button-pop {
    animation: buttonPop 0.5s ease-in-out;
  }

  /* Microinteraction for hover state on chat bubbles */
  .group:hover .group-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

</style>

Monospace Forest Rating System 구성 요소

포트폴리오에 적합한 포레스트 그린 팔레트가 있는 깔끔한 코드에서 영감을 받은 등급 시스템 구성 요소입니다. 등급을 매기기 위한 대화형 별표가 특징이며 평균 등급을 표시하며 다크 모드 지원으로 완벽하게 반응합니다.

열다 미리 보기

                <div class="font-mono bg-green-50 text-green-900 min-h-screen p-4 sm:p-8 md:p-12 dark:bg-gray-900 dark:text-green-200 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-green-100 dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-green-300 dark:border-green-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-green-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-500">$</span> product_rating_system<span class="text-green-600 dark:text-emerald-500">()</span>
      </h2>
      <p class="text-green-700 dark:text-green-400 text-sm sm:text-base mb-4 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-600">></span> Evaluate product satisfaction based on user feedback.
      </p>

      <div class="flex flex-col sm:flex-row items-center justify-between py-4 border-t border-b border-green-200 dark:border-gray-700">
        <div class="mb-4 sm:mb-0">
          <p class="text-lg font-semibold text-green-800 dark:text-green-300 code-line-prefix ">
            <span class="text-green-600 dark:text-emerald-500">avg_rating:</span> <span class="text-xl">4.7</span> / <span class="text-sm">5.0</span>
          </p>
          <div class="flex items-center text-green-600 dark:text-emerald-500 mt-1">
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-6 h-6 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <span class="ml-2 text-green-700 dark:text-green-400 text-sm">(<span class="font-bold">128</span> ratings)</span>
          </div>
        </div>

        <div class="flex flex-col items-center">
          <p class="text-lg font-semibold text-green-800 dark:text-green-300 mb-2 code-line-prefix ">
            <span class="text-green-600 dark:text-emerald-500">$</span> submit_rating<span class="text-green-600 dark:text-emerald-500">()</span>
          </p>
          <div class="flex text-green-400 dark:text-gray-500 space-x-1">
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="1 star">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="2 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="3 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="4 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
            <button class="star-button focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-green-100 p-1 rounded-sm transition-colors duration-200 hover:text-emerald-500 dark:hover:text-emerald-400" aria-label="5 stars">
              <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="p-6 sm:p-8 lg:p-10">
      <h3 class="text-xl sm:text-2xl font-bold text-green-800 dark:text-green-300 mb-4 code-line-prefix ">
        <span class="text-green-600 dark:text-emerald-500">$</span> recent_reviews<span class="text-green-600 dark:text-emerald-500">()</span>
      </h3>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Review 1 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">2 days ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Absolutely stellar! This product exceeded all my expectations. The performance is top-notch and the design is incredibly intuitive. Highly recommend!"</p>
        </article>

        <!-- Review 2 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">1 week ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Solid product for the price. It does exactly what it promises. One small suggestion: a bit more documentation could be helpful."</p>
        </article>

        <!-- Review 3 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">3 weeks ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current text-green-300 dark:text-gray-600" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"Integration was easier than expected. Great tool for data visualization! Some minor bugs, but nothing that breaks the workflow."</p>
        </article>

        <!-- Review 4 -->
        <article class="bg-green-50 dark:bg-gray-700 p-5 rounded-lg border border-green-200 dark:border-gray-600 code-block">
          <div class="flex items-center mb-3">
            <img class="w-10 h-10 rounded-full mr-3 border-2 border-green-400 dark:border-emerald-600" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-green-800 dark:text-green-300">[email protected]</p>
              <p class="text-green-600 dark:text-green-400 text-sm">1 month ago</p>
            </div>
          </div>
          <div class="flex text-green-600 dark:text-emerald-500 mb-2">
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
            <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.693 7.502 8.307 1.207-6.012 5.865 1.42 8.261L12 18.066l-7.408 3.896 1.42-8.261-6.012-5.865 8.307-1.207L12 .587z"/></svg>
          </div>
          <p class="text-green-700 dark:text-green-400 leading-relaxed text-sm">"A game changer for my workflow! The features are incredibly robust and the support has been fantastic. Can't recommend enough."</p>
        </article>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the 'code-line-prefix' which creates the > or $ symbol */
  .code-line-prefix::before {
      content: ' ';
      display: inline-block;
      margin-right: 0.5em;
  }
  .code-line-prefix:not(.code-block) > span:first-child::before {
      content: ''; /* Remove prefix if it's explicitly the first span for styling it green */
      margin-right: 0;
  }

  h2.code-line-prefix::before, h3.code-line-prefix::before {
      content: '$';
      color: var(--tw-color-green-600);
  }

  .dark h2.code-line-prefix::before, .dark h3.code-line-prefix::before {
    color: var(--tw-color-emerald-500);
  }

  p.code-line-prefix::before {
      content: '>';
      color: var(--tw-color-green-600);
  }

  .dark p.code-line-prefix::before {
    color: var(--tw-color-emerald-600);
  }

  /* Simulate interactive star hover/focus for submit rating */
  .star-button:focus svg,
  .star-button:hover svg {
    color: var(--tw-color-emerald-500); /* Applies to light theme */
  }

  .dark .star-button:focus svg,
  .dark .star-button:hover svg {
    color: var(--tw-color-emerald-400); /* Applies to dark theme */
  }

  /* Example of how to 'fill' stars, would typically be done with JS but for static HTML, we use class based */
  .star-button:nth-child(1):hover ~ .star-button,
  .star-button:nth-child(2):hover ~ .star-button:nth-child(3),
  .star-button:nth-child(2):hover ~ .star-button:nth-child(4),
  .star-button:nth-child(2):hover ~ .star-button:nth-child(5),
  .star-button:nth-child(3):hover ~ .star-button:nth-child(4),
  .star-button:nth-child(3):hover ~ .star-button:nth-child(5),
  .star-button:nth-child(4):hover ~ .star-button:nth-child(5) {
      color: initial; /* Reset color for non-hovered stars */
  }

  .star-button:hover > svg,
  .star-button:hover ~ .star-button svg {
      color: inherit; /* Stars before the hovered one */
  }
  .star-button:hover + .star-button > svg {
       color: initial;
  }

</style>

Healthcare Sidebar 구성 요소

의료 애플리케이션을 위한 복잡하고 미니멀하며 반응이 빠른 사이드바 구성 요소로, 유사한 색 구성표와 다크 모드 지원을 특징으로 합니다. 탐색, 사용자 프로필 및 빠른 링크가 포함됩니다.

열다 미리 보기

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out md:translate-x-0" id="sidebar">
    <!-- Sidebar Header -->
    <div class="flex items-center justify-between h-16 px-4 border-b border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <span class="text-xl font-semibold text-gray-900 dark:text-white">MedPanel</span>
      </a>
      <!-- Mobile menu button - hidden on desktop -->
      <button type="button" class="md:hidden text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 rounded" aria-controls="sidebar" aria-expanded="false" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full');">
        <span class="sr-only">Open sidebar</span>
        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>

    <!-- User Profile -->
    <div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
      <img class="h-12 w-12 rounded-full ring-2 ring-indigo-500 dark:ring-indigo-400" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User avatar">
      <div class="ml-3">
        <p class="text-lg font-medium text-gray-900 dark:text-white">Dr. Elena Smith</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Cardiologist</p>
      </div>
    </div>

    <!-- Main Navigation -->
    <nav class="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
      <a href="#" class="flex items-center p-3 rounded-lg text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-700/30 font-semibold hover:bg-indigo-100 dark:hover:bg-indigo-700/50 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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 7m-6-6v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
        </svg>
        <span>Dashboard</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
        <span>Patients</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2zm7-9v5m-5-5h5m-5 0h.01M12 12c-1.104 0-2 .896-2 2s.896 2 2 2 2-.896 2-2-.896-2-2-2z" />
        </svg>
        <span>Appointments</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
        <span>Records</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M10 14v10m-2-5a2 2 0 002 2h4a2 2 0 002-2m-2 0V11m0 0h2m-2 0H8m6 0h2m-2 0v5m4-5v5M7 7h.01M17 7h.01" />
        </svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
        </svg>
        <span>Messages <span class="ml-2 inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">3</span></span>
      </a>
    </nav>

    <!-- Quick Links / Settings -->
    <div class="mt-auto px-2 py-4 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
        <span>Settings</span>
      </a>
      <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 group transition-colors duration-200">
        <svg class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
        <span>Logout</span>
      </a>
    </div>
  </div>

  <!-- Main Content Area (dummy content for layout) -->
  <main class="flex-1 p-6 md:p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold mb-6 text-gray-900 dark:text-white">Dashboard Overview</h1>
    <p class="text-gray-700 dark:text-gray-300">Welcome to your healthcare management system. Use the sidebar to navigate through different sections.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Upcoming Appointments</h2>
        <p class="text-gray-700 dark:text-gray-300">Dr. John Doe - Cardiology, Today 10:00 AM</p>
        <p class="text-gray-700 dark:text-gray-300">Ms. Jane Smith - Pediatrics, Tomorrow 02:30 PM</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Recent Patients</h2>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Patient ID: P2023001 - <span class="font-medium">Sarah Connor</span></li>
          <li>Patient ID: P2023002 - <span class="font-medium">Kyle Reese</span></li>
        </ul>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold mb-3 text-gray-900 dark:text-white">Pending Tasks</h2>
        <p class="text-gray-700 dark:text-gray-300">Review lab results for Patient P2023001</p>
        <p class="text-gray-700 dark:text-gray-300">Update medication for Patient P2023002</p>
        <a href="#" class="mt-4 inline-block text-indigo-600 dark:text-indigo-400 hover:underline">View all</a>
      </div>
    </div>
  </main>

  <!-- Overlay for mobile sidebar -->
  <div class="fixed inset-0 bg-gray-900 bg-opacity-50 z-40 md:hidden -translate-x-full transition-opacity duration-300 ease-in-out" id="sidebar-overlay" onclick="document.getElementById('sidebar').classList.toggle('translate-x-0'); document.getElementById('sidebar').classList.toggle('-translate-x-full'); document.getElementById('sidebar-overlay').classList.toggle('opacity-100'); document.getElementById('sidebar-overlay').classList.toggle('-translate-x-full');"></div>

  <script>
    // This small script is for handling the mobile sidebar open/close functionality.
    // In a real application, you'd likely use a framework or more robust JS.
    const sidebar = document.getElementById('sidebar');
    const sidebarToggleButton = document.querySelector('button[aria-controls="sidebar"]');
    const sidebarOverlay = document.getElementById('sidebar-overlay');

    sidebarToggleButton.addEventListener('click', () => {
      sidebar.classList.toggle('-translate-x-full');
      sidebarOverlay.classList.toggle('-translate-x-full');
    });

    sidebarOverlay.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
      sidebarOverlay.classList.add('-translate-x-full');
    });
  </script>
</div>

ArtDecoPhotography메가메뉴

보석 톤의 아르데코 스타일로 디자인된 단순하고 반응이 빠른 메가 메뉴 구성 요소로, 사진 포트폴리오에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <nav class="bg-emerald-800 dark:bg-gray-900 shadow-lg font-serif">
  <div class="container mx-auto px-4 py-2 flex justify-between items-center">
    <a href="#" class="text-ruby-300 dark:text-emerald-300 text-2xl font-bold tracking-wider uppercase transform skew-x-[-10deg]">
      <span class="block -skew-x-[10deg]">Reflections</span>
    </a>
    
    <!-- Mobile Menu Button -->
    <button id="menu-button" class="md:hidden text-emerald-100 dark:text-emerald-100 focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Mega Menu - Desktop and Hidden Mobile -->
    <div id="mega-menu" class="hidden md:flex flex-col md:flex-row md:space-x-8 mt-4 md:mt-0">
      <div class="relative group">
        <button class="peer py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 focus:outline-none text-lg tracking-wide">Galleries</button>
        <div class="absolute hidden peer-hover:block hover:block w-48 md:w-96 lg:w-3/4 max-w-lg bg-emerald-700 dark:bg-gray-800 shadow-xl transition-all duration-300 ease-in-out transform scale-y-0 origin-top group-hover:scale-y-100 rounded-md py-4 mt-2 z-10">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 px-4">
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Collections</h3>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Portraits</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Landscapes</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Abstract</a>
              <a href="#" class="block px-3 py-1 text-emerald-100 dark:text-emerald-100 hover:bg-emerald-600 dark:hover:bg-gray-700 rounded-sm text-base">Candid</a>
            </div>
            <div>
              <h3 class="text-sapphire-300 dark:text-sapphire-300 text-sm uppercase mb-2">Featured Work</h3>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=1" alt="Featured Image 1" class="w-full h-auto rounded-sm"></div>
              <div class="mb-2"><img src="https://picsum.photos/150/100?random=2" alt="Featured Image 2" class="w-full h-auto rounded-sm"></div>
            </div>
          </div>
        </div>
      </div>

      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Services</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">About</a>
      <a href="#" class="py-2 px-3 text-emerald-100 dark:text-emerald-100 hover:text-white dark:hover:text-white transition duration-300 text-lg tracking-wide">Contact</a>
    </div>
  </div>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const megaMenu = document.getElementById('mega-menu');

    menuButton.addEventListener('click', function() {
      megaMenu.classList.toggle('hidden');
      megaMenu.classList.toggle('flex');
      megaMenu.classList.toggle('flex-col');
    });
  });
</script>

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

레트로/빈티지 미학을 가미한 간단하고 반응이 빠른 이동 경로 탐색 구성 요소로, 기업용 블루 톤을 사용하며 교육 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse font-sans">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
        </svg>
        Home
      </a>
    </li>
    <li>
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-blue-700 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200 uppercase tracking-widest">Courses</a>
      </div>
    </li>
    <li aria-current="page">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-blue-600 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
        </svg>
        <span class="ms-1 text-sm font-medium text-blue-500 dark:text-blue-500 uppercase tracking-widest">Lesson 1</span>
      </div>
    </li>
  </ol>
</nav>

제품 비교 구성 요소 - Crypto

럭셔리/프리미엄 디자인, 사탕/달콤한 색 구성표를 갖춘 반응형 제품 비교 구성 요소로, 암호화폐/블록체인 애플리케이션에 맞게 조정되었습니다. 다크 모드 지원, 우아한 타이포그래피 및 자리 표시자 데이터가 특징입니다.

열다 미리 보기

                <div class="font-sans bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 text-gray-800 dark:text-gray-200 p-4 md:p-8 lg:p-12 min-h-screen">
  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-850 shadow-xl rounded-2xl overflow-hidden animate-fade-in">
    <header class="p-6 md:p-8 bg-gradient-to-r from-pink-400 to-purple-400 dark:from-gray-700 dark:to-gray-900 text-white dark:text-gray-100 text-center">
      <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-2">
        Choose Your Crypto Platform
      </h1>
      <p class="text-lg md:text-xl opacity-90">
        Compare features to find your perfect blockchain solution.
      </p>
    </header>

    <div class="relative overflow-x-auto">
      <table class="w-full table-auto border-separate border-spacing-y-2 lg:border-spacing-y-4 p-4">
        <thead class="sr-only lg:not-sr-only">
          <tr>
            <th class="w-1/4 p-4 text-left text-lg font-semibold text-gray-600 dark:text-gray-300"></th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Alpha</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Beta</th>
            <th class="w-1/4 p-4 text-center text-lg font-semibold text-gray-600 dark:text-gray-300">Platform Gamma</th>
          </tr>
        </thead>
        <tbody>
          <!-- Product Headers for Mobile/Tablet -->
          <tr class="lg:hidden">
            <td class="py-4 px-2 sm:px-4 lg:px-6 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
                <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
                <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
              </div>
              <div class="flex-1">
                <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
                <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-full max-w-xs mx-auto rounded-lg shadow-md mb-2">
                <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
              </div>
            </td>
          </tr>

          <!-- Product Details Row (Desktop) -->
          <tr class="hidden lg:table-row">
            <td class="py-4 px-6 text-gray-600 dark:text-gray-300 font-medium align-top"></td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Alpha</h3>
              <img src="https://picsum.photos/300/200?random=1" alt="Platform Alpha Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">A leading-edge blockchain for DeFi.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Beta</h3>
              <img src="https://picsum.photos/300/200?random=2" alt="Platform Beta Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">Scalable enterprise-grade blockchain.</p>
            </td>
            <td class="py-4 px-6 text-center align-top">
              <h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Platform Gamma</h3>
              <img src="https://picsum.photos/300/200?random=3" alt="Platform Gamma Logo" class="w-48 h-32 object-cover mx-auto rounded-lg shadow-md mb-2">
              <p class="text-gray-600 dark:text-gray-400 text-sm italic">NFTs and digital asset powerhouse.</p>
            </td>
          </tr>

          <!-- Feature Row: Consensus Mechanism -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Consensus Mechanism</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-pink-500 dark:text-pink-400">PoS (Proof of Stake)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-purple-500 dark:text-purple-400">DPoS (Delegated PoS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle font-semibold text-green-500 dark:text-green-400">PoW (Proof of Work)</td>
          </tr>

          <!-- Feature Row: Transaction Speed -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Tx Speed (TPS)</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">5,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">100,000+</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">7-10</td>
          </tr>

          <!-- Feature Row: Transaction Fees (Avg) -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Avg. Tx Fee</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">$0.01 - $0.10</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-green-600 dark:text-green-300 font-semibold">&lt; $0.01</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-orange-600 dark:text-orange-300 font-semibold">$1 - $50 (volatile)</td>
          </tr>

          <!-- Feature Row: Smart Contract Support -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-pink-300 dark:border-pink-600 rounded-l-xl">Smart Contracts</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-green-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <svg class="w-6 h-6 text-red-500 mx-auto" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
            </td>
          </tr>

          <!-- Feature Row: Decentralization Level -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-purple-300 dark:border-purple-600 rounded-l-xl">Decentralization</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Medium-High</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200">Very High</td>
          </tr>

          <!-- Feature Row: Typical Use Cases -->
          <tr class="bg-white dark:bg-gray-850 rounded-xl shadow-sm">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium border-l-4 border-green-300 dark:border-green-600 rounded-l-xl">Use Cases</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">DeFi, Dapps, GameFi</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Enterprise, CBDC, Supply Chain</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle text-gray-800 dark:text-gray-200 text-sm">Store of Value, NFTs, Payments</td>
          </tr>

          <!-- Call to Action Row -->
          <tr class="bg-gradient-to-r from-pink-50 dark:from-gray-700 via-purple-50 dark:via-gray-800 to-green-50 dark:to-gray-900 rounded-xl">
            <td class="py-4 px-4 sm:px-6 text-gray-600 dark:text-gray-300 font-medium align-middle">Get Started</td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Alpha
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Beta
              </button>
            </td>
            <td class="py-4 px-2 sm:px-4 lg:px-6 text-center align-middle">
              <button class="w-full max-w-[150px] mx-auto bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
                Visit Gamma
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <footer class="p-6 md:p-8 bg-gradient-to-l from-pink-400 to-purple-400 dark:from-gray-900 dark:to-gray-700 text-white dark:text-gray-100 text-center">
      <p class="text-sm opacity-80">&copy; 2023 Crypto Compare. All rights reserved.</p>
      <p class="text-xs mt-1 opacity-70">Data for illustrative purposes only. Consult official sources.</p>
    </footer>
  </div>
</div>

오류 메시지 구성 요소 - 데이트/소셜 - 어두운 세피아

데이트/소셜 플랫폼용으로 설계된 복잡한 오류 메시지 구성 요소로, 어두운 세피아 색 구성표, 완전한 응답성 및 눈의 피로를 줄이기 위한 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-stone-900 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-2xl bg-stone-800 dark:bg-stone-900 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-stone-700 dark:border-stone-800 transform transition-all duration-300 hover:shadow-stone-700/50 hover:-translate-y-1">
    <div class="absolute top-0 right-0 -mr-3 -mt-3 w-10 h-10 bg-red-800 rounded-full flex items-center justify-center text-white text-xl font-bold border-2 border-stone-700 dark:border-stone-800 shadow-lg">
      !
    </div>

    <div class="text-center mb-6 sm:mb-8 lg:mb-10">
      <svg class="mx-auto h-16 w-16 text-red-600 dark:text-red-700 mb-4 animate-bounce-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-red-500 dark:text-red-600 mb-2 sm:mb-3 leading-tight tracking-tight drop-shadow-lg">
        Connection Lost!
      </h2>
      <p class="text-base sm:text-lg text-stone-300 dark:text-stone-400 leading-relaxed">
        It seems we've encountered an unexpected hiccup. Don't worry, even Cupid has bad days.
      </p>
    </div>

    <div class="space-y-4 sm:space-y-5 mb-6 sm:mb-8 lg:mb-10">
      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-100">
        <svg class="h-6 w-6 text-yellow-400 dark:text-yellow-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Account Synchronization Error</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Your profile could not be fully loaded. Some features might be temporarily unavailable.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-200">
        <svg class="h-6 w-6 text-orange-400 dark:text-orange-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Failed to Fetch Matches</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">We're having trouble fetching new matches right now. Please try again in a few moments.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-300">
        <svg class="h-6 w-6 text-rose-400 dark:text-rose-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Messaging Service Offline</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Messages may not be sent or received at this time. We're working to restore service.</p>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="w-full sm:w-auto px-6 py-3 bg-red-700 dark:bg-red-800 text-white rounded-full text-lg font-semibold shadow-lg hover:bg-red-600 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.582m-15.356-2A8.001 8.001 0 0119.418 15m0 0H15" />
          </svg>
          Try Again
        </span>
      </button>
      <button class="w-full sm:w-auto px-6 py-3 bg-stone-700 dark:bg-stone-800 text-stone-200 rounded-full text-lg font-semibold shadow-lg hover:bg-stone-600 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9.247a4.75 4.75 0 014.75 4.75v1A.75.75 0 0014 15.75h1.75a.75.75 0 00.75-.75V11a4.75 4.75 0 00-4.75-4.75H9.25a.75.75 0 00-.75.75v1.75a.75.75 0 00.75.75h1A.75.75 0 0012 11h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 9h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 7.75h-.75a.75.75 0 00-.75.75V11a4.75 4.75 0 004.75 4.75h1A.75.75 0 0012 15.75h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 14h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 12.75h-.75a.75.75 0 00-.75.75V17a4.75 4.75 0 004.75 4.75h-1A.75.75 0 008.228 9.247z" />
          </svg>
          Support
        </span>
      </button>
    </div>

    <div class="mt-8 text-center text-sm text-stone-400 dark:text-stone-500">
      <p>Error Code: 500-SRV-2001-ALPHA. If the issue persists, our matchmakers are on it!</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 3s infinite;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .anim-fade-in {
    animation: fade-in 0.5s ease-out forwards;
    opacity: 0; /* Ensures element is hidden before animation plays */
  }
  .anim-delay-100 { animation-delay: 0.1s; }
  .anim-delay-200 { animation-delay: 0.2s; }
  .anim-delay-300 { animation-delay: 0.3s; }
</style>

Glassmorphism_Music_Follow_Button_Component

음악 및 오디오 플랫폼용으로 설계된 복잡한 단색 유리 형태 팔로우 버튼 구성 요소는 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소를 특징으로 하며 완벽하게 반응하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="relative w-full max-w-sm p-6 rounded-2xl shadow-xl overflow-hidden backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 ring-1 ring-inset ring-white/50 dark:ring-gray-700/50 transform-gpu transition-all duration-500 hover:scale-105 hover:shadow-2xl">
    <!-- Background overlay for glass effect -->
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-blue-300/40 dark:from-sky-700/40 to-indigo-500/40 dark:to-blue-900/40 blur-3xl opacity-60 dark:opacity-40 pointer-events-none"></div>

    <div class="relative z-10 flex flex-col items-center text-center space-y-4">

      <!-- Artist/Profile Image -->
      <div class="relative w-24 h-24 rounded-full overflow-hidden border-4 border-white/70 dark:border-gray-600/70 shadow-lg group-hover:scale-110 transition-transform duration-300">
        <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
      </div>

      <!-- Artist Name and Details -->
      <div>
        <h3 class="text-2xl font-bold text-gray-800 dark:text-white mt-2 drop-shadow-sm">Aurora Rhapsody</h3>
        <p class="text-md text-gray-600 dark:text-gray-300">Electronic / Ambient Artist</p>
        <div class="flex justify-center items-center text-sm text-gray-700 dark:text-gray-400 space-x-2 mt-1">
          <span><strong class="font-semibold">1.2M</strong> Followers</span>
          <span class="h-1 w-1 bg-gray-500 rounded-full"></span>
          <span><strong class="font-semibold">30</strong> Tracks</span>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="follow-button group relative px-6 py-3 rounded-full overflow-hidden shadow-lg bg-blue-500/60 dark:bg-sky-700/60 transition-all duration-300 ring-1 ring-inset ring-blue-400/80 dark:ring-sky-600/80 transform-gpu hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-sky-500">
        <!-- Glassmorphism background for button -->
        <span class="absolute inset-0 bg-blue-400/30 dark:bg-sky-600/30 backdrop-blur-sm group-hover:bg-blue-500/40 dark:group-hover:bg-sky-700/40 transition-colors duration-300"></span>
        <span class="relative z-10 flex items-center text-lg font-semibold text-white group-hover:text-white dark:text-white drop-shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 transition-transform group-hover:rotate-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 14v4m-2 2h4m-2-6a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
          Follow
        </span>
      </button>

      <!-- CTA / More Info -->
      <a href="#" class="text-sm text-gray-700 dark:text-gray-400 hover:underline mt-4">
        <span class="flex items-center space-x-1">
          <span>View Profile</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
        </span>
      </a>

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

맨 위로 이동 버튼 구성 요소

문서/위키 사이트를 위한 반응형 '맨 위로' 버튼 구성 요소로, 자주색/보라색 색 구성표가 있는 Memphis Design에서 영감을 받았습니다. 다크 모드 지원과 복잡한 대화형 모양이 포함됩니다.

열다 미리 보기

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer rotating square container -->
  <div class="relative w-20 h-20 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32 transform rotate-45 group hover:rotate-0 transition-transform duration-500 ease-in-out">
    <!-- Larger inner purple square -->
    <div class="absolute inset-0 bg-purple-600 dark:bg-purple-800 rounded-lg shadow-xl group-hover:scale-110 transition-transform duration-300 ease-out"></div>

    <!-- Smaller offset violet triangle overlay -->
    <div class="absolute -bottom-2 -left-2 sm:-bottom-3 sm:-left-3 md:-bottom-4 md:-left-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-violet-400 dark:bg-violet-600 rounded-md transform rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- Smaller offset lavendar circle overlay -->
    <div class="absolute -top-2 -right-2 sm:-top-3 sm:-right-3 md:-top-4 md:-right-4 w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-indigo-300 dark:bg-indigo-500 rounded-full transform -rotate-12 group-hover:rotate-0 group-hover:scale-125 transition-all duration-500 ease-in-out"></div>

    <!-- The actual button element (positioned to appear central in the rotated context) -->
    <button
      aria-label="Back to top"
      onclick="window.scrollTo({ top: 0, behavior: 'smooth' });"
      class="absolute inset-0 flex items-center justify-center p-4 transform -rotate-45 group-hover:rotate-0 transition-transform duration-500 ease-in-out
             rounded-xl focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
             active:scale-95 transition-transform duration-150"
    >
      <!-- Inner button styling for Memphis flair -->
      <div class="relative w-full h-full bg-purple-400 dark:bg-purple-700 rounded-lg border-4 border-dashed border-white border-opacity-70 dark:border-opacity-30 flex items-center justify-center
                  group-hover:bg-purple-500 dark:group-hover:bg-purple-900 transition-colors duration-300 ease-out">
        <!-- Arrow Icon -->
        <svg
          class="w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 text-white dark:text-gray-200 transition-transform duration-300 ease-out
                 group-hover:-translate-y-1 group-hover:scale-110"
          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="M5 10l7-7m0 0l7 7m-7-7v18"
          ></path>
        </svg>

        <!-- Small decorative dot overlay (Memphis style) -->
        <div class="absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-pink-400 dark:bg-pink-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
        <div class="absolute -bottom-1 -left-1 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5 bg-teal-400 dark:bg-teal-600 rounded-full shadow-lg group-hover:scale-150 transition-transform duration-300"></div>
      </div>
    </button>
  </div>
</div>

Password Reset 구성 요소

부동산 플랫폼에 적합한 어스 톤의 미니멀리스트/플랫 디자인 암호 재설정 구성 요소. 반응형 레이아웃, 다크 모드 지원 및 복잡한 인터페이스를 위한 여러 입력 필드가 특징입니다.

열다 미리 보기

                <div class="min-h-screen bg-stone-100 flex items-center justify-center p-4 dark:bg-stone-900">
  <div class="max-w-md w-full bg-white p-8 rounded-lg shadow-xl dark:bg-stone-800 dark:text-stone-200 border border-stone-200 dark:border-stone-700">
    <div class="text-center mb-8">
      <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-2">Reset Your Password</h2>
      <p class="text-stone-600 dark:text-stone-400">Enter your new password below. It should be strong and unique.</p>
    </div>

    <form class="space-y-6">
      <div>
        <label for="new-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">New Password</label>
        <input type="password" id="new-password" name="new-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
        <p class="mt-2 text-sm text-stone-500 dark:text-stone-400">Must be at least 8 characters, with letters, numbers, and symbols.</p>
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1">Confirm New Password</label>
        <input type="password" id="confirm-password" name="confirm-password" required class="mt-1 block w-full px-4 py-2 bg-stone-50 border border-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400">
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:bg-stone-700 dark:border-stone-600 dark:checked:bg-amber-700">
          <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-300">Remember me on this device</label>
        </div>
      </div>

      <div>
        <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-stone-800">
          Reset Password
        </button>
      </div>
    </form>

    <div class="mt-6 text-center text-sm">
      <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400">Back to login</a>
    </div>
  </div>
</div>

1 ... 102 103 104 105 106 ... 335

검색 구성 요소

카테고리

모든 구성 요소