검색 구성 요소

모든 구성 요소

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

Maps 컴포넌트

교육용 플랫폼을 위해 설계된 반응형 지도와 같은 구성 요소로, 인터랙티브 요소와 다크 모드를 지원하는 부드러운 파스텔 색상을 특징으로 합니다. 미묘한 호버 및 활성 상태와 같은 미시적 상호 작용에 중점을 둡니다.

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:scale-[1.005] group">
    <div class="relative">
      <!-- Map Placeholder Image -->
      <img src="https://picsum.photos/800/400?random=1" alt="Map illustration" class="w-full h-48 sm:h-64 object-cover object-center rounded-t-xl group-hover:brightness-90 transition-all duration-300">

      <!-- Overlay for title and search -->
      <div class="absolute inset-0 bg-blue-100/60 dark:bg-blue-900/60 flex flex-col justify-between p-4 sm:p-6 rounded-t-xl">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-2 sm:space-y-0">
          <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-800 dark:text-blue-100 transition-colors duration-300">
            Explore Learning Paths
          </h2>
          <div class="relative w-full sm:w-auto">
            <input type="text" placeholder="Search locations or topics..." class="w-full sm:w-64 py-2 pl-10 pr-4 text-sm bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-300 border border-gray-200 dark:border-gray-600 rounded-full focus:ring-2 focus:ring-blue-400 focus:outline-none transition-all duration-300 shadow-sm">
            <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- Content Area: Locations/Topics -->
    <div class="p-4 sm:p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
      <!-- Location Card 1 -->
      <div class="group relative bg-blue-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-blue-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-blue-300 dark:group-hover:border-blue-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=2" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-blue-400/20 dark:bg-blue-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-blue-700 dark:text-blue-200 group-hover:text-blue-800 dark:group-hover:text-blue-100 transition-colors duration-300">Introduction to AI</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Explore foundational concepts and applications of artificial intelligence.</p>
            <a href="#" class="mt-2 inline-flex items-center text-blue-500 dark:text-blue-300 text-sm font-medium hover:underline hover:text-blue-600 dark:hover:text-blue-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-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="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Location Card 2 -->
      <div class="group relative bg-green-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-green-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-green-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-green-300 dark:group-hover:border-green-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=3" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-green-400/20 dark:bg-green-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-green-700 dark:text-green-200 group-hover:text-green-800 dark:group-hover:text-green-100 transition-colors duration-300">Data Science Fundamentals</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Learn the basics of data analysis, visualization, and machine learning.</p>
            <a href="#" class="mt-2 inline-flex items-center text-green-500 dark:text-green-300 text-sm font-medium hover:underline hover:text-green-600 dark:hover:text-green-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-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="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Location Card 3 -->
      <div class="group relative bg-purple-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-purple-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-purple-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-purple-300 dark:group-hover:border-purple-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=4" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-purple-400/20 dark:bg-purple-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-purple-700 dark:text-purple-200 group-hover:text-purple-800 dark:group-hover:text-purple-100 transition-colors duration-300">Web Development Bootcamp</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Master frontend and backend development with hands-on projects.</p>
            <a href="#" class="mt-2 inline-flex items-center text-purple-500 dark:text-purple-300 text-sm font-medium hover:underline hover:text-purple-600 dark:hover:text-purple-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-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="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Location Card 4 -->
      <div class="group relative bg-pink-50 dark:bg-gray-700 rounded-lg p-4 transition-all duration-300 transform hover:scale-[1.02] hover:shadow-md border border-pink-100 dark:border-gray-600 focus-within:ring-2 focus-within:ring-pink-300">
        <span class="absolute inset-0 rounded-lg border-2 border-transparent group-hover:border-pink-300 dark:group-hover:border-pink-500 transition-colors duration-300 pointer-events-none"></span>
        <div class="flex items-start">
          <div class="flex-shrink-0 relative w-16 h-16 rounded-full overflow-hidden mr-4 shadow-sm">
            <img src="https://picsum.photos/100/100?random=5" alt="Topic image" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
            <div class="absolute inset-0 bg-pink-400/20 dark:bg-pink-600/20 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <div>
            <h3 class="text-lg font-semibold text-pink-700 dark:text-pink-200 group-hover:text-pink-800 dark:group-hover:text-pink-100 transition-colors duration-300">Creative Writing Workshop</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Unleash your imagination and refine your storytelling skills.</p>
            <a href="#" class="mt-2 inline-flex items-center text-pink-500 dark:text-pink-300 text-sm font-medium hover:underline hover:text-pink-600 dark:hover:text-pink-200 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 rounded-md">
              View Course
              <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-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="M9 5l7 7-7 7"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Call to Action/Footer -->
    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600 flex justify-center">
      <button class="px-6 py-3 bg-blue-500 text-white font-semibold rounded-full shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-0.5 active:translate-y-0 active:scale-98">
        Discover More Paths
      </button>
    </div>
  </div>
</div>

사이버펑크 학습 모달

교육용 플랫폼을 위한 반응형 사이버펑크 테마의 모달 구성 요소로, 어두운 배경, 네온 액센트 및 인터랙티브 요소를 특징으로 합니다. 다크 모드를 지원합니다.

열다 미리 보기

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-70 backdrop-blur-sm">
  <div class="relative w-full max-w-lg mx-auto overflow-hidden text-white rounded-lg shadow-xl dark:shadow-purple-glow bg-gradient-to-br from-gray-900 to-black border-2 border-purple-600 dark:border-purple-500 animate-fade-in-up">
    <!-- Close Button - Top Right -->
    <button class="absolute top-3 right-3 p-2 text-purple-300 hover:text-cyan-400 focus:outline-none transition-colors duration-300 z-10">
      <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="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>

    <!-- Header with animated border -->
    <div class="p-6 pb-4 border-b-2 border-purple-600 relative overflow-hidden">
      <h2 class="text-3xl font-bold text-center text-purple-300 dark:text-purple-400 drop-shadow-lg leading-tight">
        <span class="text-cyan-400">//</span> MODULE 01: NEURAL NETWORKS <span class="text-cyan-400">//</span>
      </h2>
      <div class="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent animate-scan"></div>
    </div>

    <!-- Content Area -->
    <div class="p-6 space-y-6 md:p-8">
      <p class="text-gray-300 text-lg leading-relaxed dark:text-gray-400">
        Dive deep into the pulsating heart of artificial intelligence. Unravel the mysteries of perceptrons, backpropagation, and the very fabric of machine cognition.
      </p>
      
      <div class="relative w-full h-48 rounded-md overflow-hidden border border-cyan-500 shadow-lg shadow-cyan-900/50">
        <img src="https://picsum.photos/600/300?random=1" alt="Course thumbnail" class="object-cover object-center w-full h-full opacity-80 group-hover:opacity-100 transition-opacity duration-300" />
        <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center group-hover:bg-opacity-30 transition-all duration-300">
          <span class="text-xl font-semibold text-white/90 drop-shadow-md">Visualizing the Network</span>
        </div>
      </div>

      <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 py-2 border-t-2 border-b-2 border-purple-800 dark:border-purple-900 bg-gray-900/50">
        <div class="flex items-center gap-3">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Instructor Avatar" class="w-10 h-10 rounded-full border-2 border-cyan-400 shadow-md" />
          <span class="text-sm text-gray-200">Lead Instructor: <span class="font-medium text-purple-300">Dr. Evelyn Reed</span></span>
        </div>
        <div class="flex items-center gap-4 text-sm text-gray-300">
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4 text-cyan-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            60 min
          </span>
          <span class="flex items-center gap-1">
            <svg class="w-4 h-4 text-purple-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="M5 13l4 4L19 7"></path>
            </svg>
            Expert Level
          </span>
        </div>
      </div>

      <div class="space-y-4">
        <h3 class="text-xl font-bold text-cyan-400">Key Concepts:</h3>
        <ul class="list-none p-0 m-0 space-y-2">
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="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"></path>
            </svg>
            Understanding Perceptrons and Activation Functions.
          </li>
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="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"></path>
            </svg>
            Implementing Backpropagation for Learning.
          </li>
          <li class="flex items-start gap-2 text-gray-300">
            <svg class="w-5 h-5 mt-1 text-purple-500 flex-shrink-0" 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="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"></path>
            </svg>
            Exploring Convolutional and Recurrent Networks.
          </li>
        </ul>
      </div>
    </div>

    <!-- Footer Buttons -->
    <div class="p-6 pt-4 flex flex-col sm:flex-row justify-end gap-3 border-t-2 border-purple-600">
      <button class="px-6 py-3 text-sm font-semibold rounded-md transition-all duration-300 
                     bg-transparent border-2 border-purple-500 text-purple-300 
                     hover:bg-purple-700 hover:border-purple-700 hover:text-white 
                     focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-gray-900 
                     dark:hover:bg-purple-600 dark:border-purple-600 dark:focus:ring-offset-black">
        <span class="text-cyan-400 text-lg mr-1">&lt;&lt;</span> Back to Modules
      </button>
      <button class="px-8 py-3 text-sm font-bold rounded-md transition-all duration-300 
                     bg-cyan-500 text-gray-900 border-2 border-cyan-500 
                     shadow-lg shadow-cyan-500/50 
                     hover:bg-cyan-400 hover:shadow-cyan-400/60 
                     focus:outline-none focus:ring-2 focus:ring-cyan-400 focus:ring-offset-2 focus:ring-offset-gray-900 
                     dark:bg-cyan-600 dark:hover:bg-cyan-500 dark:shadow-cyan-600/50 dark:focus:ring-offset-black">
        Enroll Now <span class="text-purple-900 text-lg ml-1">//</span>
      </button>
    </div>
  </div>

  <!-- Custom CSS for animations and glows (typically in Tailwind config or external CSS) -->
  <style>
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-up {
      animation: fadeIn 0.4s ease-out forwards;
    }
    
    @keyframes scan {
      0% { transform: translateX(-100%); }
      50% { transform: translateX(0); }
      100% { transform: translateX(100%); }
    }
    .animate-scan {
      animation: scan 3s infinite linear;
    }

    .dark .dark\:shadow-purple-glow {
      box-shadow: 0 0 15px rgba(168, 85, 247, 0.7), 0 0 30px rgba(168, 85, 247, 0.5);
    }
  </style>
</div>

Memphis_Purple_Entertainment_Footer_Component

엔터테인먼트/미디어 플랫폼을 위한 간단한 바닥글 구성 요소로, 대담한 보라색-보라색 색상, 기하학적 요소, 다크 모드 지원으로 완전한 응답성을 갖춘 Memphis Design 스타일을 특징으로 합니다.

열다 미리 보기

                <footer class="bg-violet-200 dark:bg-violet-950 p-6 sm:p-8 md:p-10 text-violet-900 dark:text-violet-100 relative overflow-hidden font-sans">
  <!-- Memphis Style Geometric Shapes - Background -->
  <div class="absolute top-0 left-0 w-24 h-24 bg-violet-400 dark:bg-violet-700 transform -translate-x-1/2 -translate-y-1/2 rounded-full opacity-60 dark:opacity-40"></div>
  <div class="absolute bottom-0 right-0 w-32 h-32 bg-violet-500 dark:bg-violet-800 transform translate-x-1/3 translate-y-1/3 rotate-45 opacity-60 dark:opacity-40"></div>
  <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-violet-300 dark:bg-violet-600 rounded-lg transform rotate-12 opacity-60 dark:opacity-40 hidden sm:block"></div>
  <div class="absolute bottom-1/4 left-1/4 w-20 h-20 bg-violet-400 dark:bg-violet-700 rounded-full transform -rotate-24 opacity-60 dark:opacity-40 hidden md:block"></div>

  <div class="container mx-auto flex flex-col items-center space-y-4 relative z-10">
    <div class="text-2xl sm:text-3xl font-extrabold tracking-tight text-violet-800 dark:text-violet-200">
      <span class="text-violet-600 dark:text-violet-400">Stream</span>Now
    </div>

    <nav class="flex flex-wrap justify-center gap-x-4 gap-y-2 text-sm sm:text-base font-medium">
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">About Us</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Terms of Service</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Privacy Policy</a>
      <a href="#" class="hover:text-violet-700 dark:hover:text-violet-300 transition-colors duration-200">Contact</a>
    </nav>

    <div class="flex space-x-4">
      <a href="#" aria-label="Facebook" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" aria-label="Twitter" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M.21 2.87a9.982 9.982 0 0 1 2.83-1.07C3.96 1.4 5.25.9 6.64.9c2.7.0 4.7 1.4 5.3 3.4a.2.2 0 0 1-.03.22c-.93 1.2-2.1 2.1-3.6 2.8a.2.2 0 0 0-.2.2v.4c0 .8.2 1.5.7 2.1c.5.5 1.1.9 1.8 1.1h.4a.2.2 0 0 0 .1-.02c1.7-1.1 2.9-2.5 3.3-4.1a.2.2 0 0 1 .2-.1l1.7.3c.09.02.16.1.18.19a.2.2 0 0 1-.05.15c-1.3 1.6-2.9 2.9-4.8 3.8a.2.2 0 0 0-.1.2c-.3 1.7-.8 3.4-1.7 4.9-.8 1.3-1.9 2.5-3.3 3.4-1.4.9-2.9 1.4-4.5 1.4-1.1.0-2.3-.2-3.4-.6a.2.2 0 0 1-.16-.25c.1-.14 1.3-.84 2.8-1.54 1.4-.7 2.6-1.35 3.4-1.9a.2.2 0 0 0 .02-.27c-.06-.1-.13-.15-.22-.17-.7-.15-1.5-.22-2.3-.2A4.246 4.246 0 0 0 3 14.8c-.8.4-1.6.7-2.3.8a.2.2 0 0 1-.2-.14c-.1-.1-.1-.2-.04-.33 1.3-2.1 2.2-3.7 2.7-4.7C4.1 8 4.6 7.4 5.1 6.8c.4-.6.8-1.2 1.1-1.7a.2.2 0 0 0 .04-.21c-.4-.7-.7-1.5-.7-2.3 0-.02 0-.04.01-.07zM20.7 7.7l.9-1.9c-.9-.1-1.7-.3-2.6-.6a1.1 1.1 0 0 1-.2-.2c-.1-.3-.2-.6-.2-.9.0-1.8 1.6-2.9 4.3-3.1.2 0 .2.08.1.23-.2.3-.9.9-2.2 1.6a.2.2 0 0 1-.1.21c-.4.2-1 .3-1.6.4-.6.1-.9.6-1.1.9-.3.5-.4.8-.4 1.2s.1.7.3.9c.2.2.4.3.5.4a.2.2 0 0 0 .1.02c.9.1 1.8.4 2.6.8a.2.2 0 0 0 .2-.06Z" />
        </svg>
      </a>
      <a href="#" aria-label="Instagram" class="text-violet-700 dark:text-violet-300 hover:text-violet-900 dark:hover:text-violet-100 transition-colors duration-200">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path fill-rule="evenodd" d="M12 4c-2.76 0-4.97 2.21-4.97 4.97v6.06c0 2.76 2.21 4.97 4.97 4.97h6.06c2.76 0 4.97-2.21 4.97-4.97V8.97c0-2.76-2.21-4.97-4.97-4.97H12zm0-2h6.06C21.372 2 24 4.628 24 7.94V17.06C24 20.36 21.372 23 18.06 23H7.94C4.64 23 2 20.372 2 17.06V7.94C2 4.64 4.628 2 7.94 2H12zM7.5 12c0 2.485 2.015 4.5 4.5 4.5s4.5-2.015 4.5-4.5-2.015-4.5-4.5-4.5-4.5 2.015-4.5 4.5zm0-2.5a.5.5 0 100 1 .5.5 0 000-1zm-1.5 2.5a6 6 0 1112 0 6 6 0 01-12 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>

    <p class="text-xs sm:text-sm text-center opacity-75">
      &copy; <span id="year"></span> StreamNow. All rights reserved.
    </p>
  </div>
  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
</footer>

Neon_Glow_Header_Component

네온/글로우 효과와 캔디/달콤한 색 구성표가 있는 SaaS 애플리케이션을 위한 반응형 헤더 구성 요소로, 다크 모드 지원 및 대화형 요소를 특징으로 합니다.

열다 미리 보기

                <header class="bg-gradient-to-r from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 shadow-lg relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none"><div class="absolute inset-0 bg-white opacity-10 dark:opacity-5 blur-3xl"></div></div>
    <div class="container mx-auto px-4 py-4 md:py-6 flex justify-between items-center relative z-10">
        <!-- Logo/Brand Name -->
        <a href="#" class="flex items-center space-x-2">
            <svg class="h-8 w-8 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] glow-effect-logo"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M12 2L2 7l10 5 10-5-10-5z" />
                <path d="M2 17l10 5 10-5" />
                <path d="M2 12l10 5 10-5" />
            </svg>
            <span
                class="text-white font-extrabold text-2xl tracking-tight leading-none drop-shadow-[0_0_8px_rgba(255,255,255,0.7)] group-hover:text-pink-500 transition-colors duration-300">
                Sweet<span
                    class="text-purple-700 drop-shadow-[0_0_8px_rgba(110,0,255,0.7)] dark:text-pink-400 dark:drop-shadow-[0_0_8px_rgba(255,100,200,0.7)]">SaaS</span>
            </span>
        </a>

        <!-- Desktop Navigation -->
        <nav class="hidden md:flex space-x-8 lg:space-x-12">
            <a href="#features"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Features
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#pricing"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Pricing
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#about"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                About
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
            <a href="#contact"
                class="text-white text-lg font-semibold relative group transition-colors duration-300 hover:text-pink-200 dark:hover:text-purple-300">
                Contact
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline"></span>
            </a>
        </nav>

        <!-- Action Buttons / User / Mobile Menu Toggle -->
        <div class="flex items-center space-x-4">
            <a href="#signin"
                class="hidden sm:block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
                <span class="relative z-10">Sign In</span>
                <span
                    class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
            </a>
            <a href="#signup"
                class="hidden sm:block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
                <span class="relative z-10">Sign Up</span>
                <span
                    class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
            </a>

            <!-- Mobile Menu Button -->
            <button class="md:hidden text-white focus:outline-none focus:ring-2 focus:ring-white rounded-md" aria-label="Toggle menu">
                <svg class="h-8 w-8 glow-effect-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
                    </path>
                </svg>
            </button>
        </div>
    </div>

    <!-- Mobile Menu (hidden by default, would be toggled with JS) -->
    <div class="md:hidden bg-gradient-to-b from-pink-300 to-purple-400 dark:from-gray-900 dark:to-purple-950 py-4 px-4 shadow-inner relative z-0" style="display: none;">
        <nav class="flex flex-col space-y-4">
            <a href="#features"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Features
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#pricing"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Pricing
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#about"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                About
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <a href="#contact"
                class="block text-white text-lg font-semibold py-2 transition-colors duration-300 hover:pl-2 hover:text-pink-200 dark:hover:text-purple-300 relative group">
                Contact
                <span
                    class="absolute left-0 bottom-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left glow-effect-underline glow-effect-mobile-line"></span>
            </a>
            <div class="pt-4 flex flex-col space-y-3">
                <a href="#signin"
                    class="block px-6 py-2 bg-white text-pink-500 rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-purple-700 dark:text-white dark:hover:bg-purple-600">
                    <span class="relative z-10">Sign In</span>
                    <span
                        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
                </a>
                <a href="#signup"
                    class="block px-6 py-2 bg-purple-600 text-white rounded-full font-bold relative overflow-hidden group shadow-md transition-all duration-300 hover:shadow-lg dark:bg-pink-500 dark:hover:bg-pink-400">
                    <span class="relative z-10">Sign Up</span>
                    <span
                        class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 glow-effect-button-hover"></span>
                </a>
            </div>
        </nav>
    </div>

    <!-- Custom CSS for glow effects - these would typically be in a separate CSS file or utility classes if more complex -->
    <style>
        .glow-effect-logo {
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
            transition: filter 0.3s ease-in-out;
        }

        .group:hover .glow-effect-logo {
            filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
        }

        .glow-effect-underline {
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

        .glow-effect-button-hover {
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
            filter: blur(8px);
            transform: scale(1.5);
            transition: all 0.3s ease-out;
        }

        .group:hover .glow-effect-button-hover {
            opacity: 1;
            transform: scale(1);
        }

        .glow-effect-icon {
            filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
            transition: filter 0.3s ease-in-out;
        }

        .glow-effect-icon:hover {
            filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
        }

        /* Dark mode specific glows */
        .dark .glow-effect-underline {
            box-shadow: 0 0 8px rgba(173, 216, 230, 0.5); /* Lighter blue for dark mode glow */
        }

        .dark .glow-effect-button-hover {
            background: radial-gradient(circle at center, rgba(173, 216, 230, 0.4) 0%, transparent 70%);
        }

        .dark .glow-effect-logo {
            filter: drop-shadow(0 0 8px rgba(173, 216, 230, 0.7)); /* Lighter blue for dark mode glow */
        }

        .dark .group:hover .glow-effect-logo {
            filter: drop-shadow(0 0 12px rgba(173, 216, 230, 0.9));
        }
    </style>
</header>

Corporate_Travel_Navigation

여행/관광 웹사이트를 위한 복잡하고 깨끗하며 신뢰할 수 있는 기업 스타일 탐색 모음입니다. 여러 대화형 요소, 완전한 응답성, 보색을 사용한 어두운 모드 지원이 특징입니다.

열다 미리 보기

                <nav class="bg-white dark:bg-gray-900 shadow-lg dark:shadow-xl">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <div class="flex">
        <div class="flex-shrink-0 flex items-center">
          <a href="#" class="text-blue-600 dark:text-blue-400 font-extrabold text-2xl tracking-tight">
            TravelWise
          </a>
        </div>
        <div class="hidden md:ml-10 md:flex md:space-x-8 lg:space-x-10">
          <a href="#" class="border-blue-500 text-gray-900 dark:text-gray-100 dark:border-blue-400 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
            Flights
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Hotels
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Packages
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Activities
          </a>
          <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 inline-flex items-center px-1 pt-1 border-b-2 text-md font-medium transition duration-300 ease-in-out">
            Support
          </a>
        </div>
      </div>
      <div class="hidden md:ml-6 md:flex md:items-center">
        <div class="relative ml-3">
          <div>
            <button type="button" class="max-w-xs bg-white dark:bg-gray-800 flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <img class="h-8 w-8 rounded-full"
                src="https://randomuser.me/api/portraits/men/32.jpg"
                alt="User Avatar">
            </button>
          </div>
          <!-- Dropdown menu (hidden by default) -->
          <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div> -->
        </div>
        <button type="button" class="ml-4 relative inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition transform duration-200 ease-in-out transform hover:scale-105">
            Book Now
        </button>
      </div>
      <div class="-mr-2 flex items-center md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="bg-white dark:bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 dark:focus:ring-blue-400" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!--
            Heroicon name: outline/menu
            Menu open: "hidden", Menu closed: "block"
          -->
          <svg class="block 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>
          <!-- Icon when menu is open. -->
          <!--
            Heroicon name: outline/x
            Menu open: "block", Menu closed: "hidden"
          -->
          <svg class="hidden 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="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="border-blue-500 text-gray-900 dark:text-gray-100 dark:border-blue-400 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out hover:text-blue-600 dark:hover:text-blue-400">
        Flights
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Hotels
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Packages
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Activities
      </a>
      <a href="#" class="border-transparent text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:border-gray-300 hover:text-gray-700 dark:hover:text-gray-200 block px-3 py-2 rounded-md text-base font-medium border-l-4 transition duration-300 ease-in-out">
        Support
      </a>
    </div>
    <div class="pt-4 pb-3 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full"
            src="https://randomuser.me/api/portraits/men/32.jpg"
            alt="User Avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium text-gray-800 dark:text-gray-100">John Doe</div>
          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">[email protected]</div>
        </div>
      </div>
      <div class="mt-3 space-y-1 px-2">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-100 transition duration-300 ease-in-out">
          Your Profile
        </a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-100 transition duration-300 ease-in-out">
          Settings
        </a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-100 transition duration-300 ease-in-out">
          Sign out
        </a>
      </div>
    </div>
  </div>
</nav>

소셜 로그인 구성 요소

머티리얼 디자인(Material Design) 원칙에서 영감을 받은 반응형 소셜 로그인 구성 요소로, 고대비 색상과 다크 모드 지원을 특징으로 하며 엔터테인먼트 및 미디어 플랫폼에 적합합니다.

열다 미리 보기

                <div class="p-4 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl relative border-t-4 border-b-4 border-indigo-600 dark:border-purple-600">
    <div class="px-6 py-8 md:px-8 md:py-10">
      <div class="flex items-center justify-center mb-6">
        <svg class="h-12 w-12 text-indigo-600 dark:text-purple-600" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.87-7-7.93h2c0 3.31 2.69 6 6 6v2.07zm6-1.12V14h-2v3.13c1.78-.96 3-2.99 3-5.13h2c0 2.56-1.53 4.79-3.72 5.75zM12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm0 2c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 2c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"/>
        </svg>
      </div>
      <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-2">Welcome Back!</h2>
      <p class="text-center text-gray-600 dark:text-gray-300 mb-8">Log in to continue your entertainment journey.</p>

      <div class="space-y-4 mb-6">
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500">
          <svg class="w-6 h-6 mr-3" viewBox="0 0 48 48">
            <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.65 0 6.84 5.09 3.29 12.01l7.53 5.85C12.44 14.16 17.65 9.5 24 9.5z"/>
            <path fill="#4285F4" d="M46.98 24C46.98 22.9 46.81 21.84 46.52 20.76h-2.92v-3.7H39.8M24 48c6.47 0 11.9-2.38 16.19-6.36l-6.85-6.85c-2.5 2.38-5.67 3.6-9.21 3.6-6.35 0-11.56-4.66-13.47-10.84l-7.53 5.85C6.84 42.91 14.65 48 24 48z"/>
            <path fill="#FBBC04" d="M6.86 24c0-1.78.29-3.57.85-5.26l-7.53-5.85C2.69 16.64 2 20.2 2 24s.69 7.36 1.7 10.11l7.53-5.85c-.56-1.69-.85-3.48-.85-5.26z"/>
            <path fill="#34A853" d="M24 45.5c3.54 0 6.71-1.22 9.21-3.6l6.85 6.85c-4.29 3.98-9.72 6.36-16.19 6.36-9.35 0-17.16-5.09-20.71-12.01l7.53-5.85c1.91 6.18 7.12 10.84 13.47 10.84z"/>
            <path fill="none" d="M0 0h48v48H0z"/>
          </svg>
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500">
          <svg class="w-6 h-6 mr-3 text-[#1877F2] dark:text-[#3B5998]" fill="currentColor" viewBox="0 0 24 24">
            <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24h11.498v-8.77l-1.902-1.928.01-2.923 1.901-.001-.001-1.428q0-1.428.847-2.285 1.096-1.127 2.766-1.127 1.848 0 3.037.164.095.009.197.027.098.017.182.029v2.247Q17.8 8 16.657 8.01q-1.215 0-1.4.67-.183.67-.183 1.901V12h3.045l-.49 2.923-2.555.001v8.77h6.082c.732 0 1.325-.593 1.325-1.325V1.325C24 .593 23.407 0 22.675 0z"/>
          </svg>
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500">
          <svg class="w-6 h-6 mr-3 text-[#1DA1F2] dark:text-[#1DA1F2]" fill="currentColor" viewBox="0 0 24 24">
            <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.49-1.75.85-2.72 1.05C18.36 4.37 17.21 4 16 4c-4.07 0-7.36 3.29-7.36 7.36 0 .58.06 1.14.16 1.68C6.1 12.04 3.24 10.5 1.32 7.9c-.64 1.1-1 2.37-1 3.72 0 2.55 1.3 4.81 3.25 6.13-1.21-.04-2.35-.37-3.35-.92V17c0 3.56 2.52 6.53 5.83 7.22-.6.16-1.22.25-1.87.25-.46 0-.91-.04-1.34-.13.93 2.9 3.62 5.02 6.83 5.08-2.47 1.95-5.59 3.11-9 3.11-1.85 0-3.63-.11-5.36-.32 3.18 2.04 6.94 3.23 10.97 3.23 13.06 0 20.2-10.85 20.2-20.2v-.46c.87-.63 1.62-1.42 2.22-2.31z"/>
          </svg>
          Sign in with Twitter
        </button>
      </div>

      <div class="relative flex justify-center text-sm mb-6">
        <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 z-10">Or continue with</span>
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
      </div>

      <form class="space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-indigo-500 dark:focus:ring-purple-500 focus:border-indigo-500 dark:focus:border-purple-500 focus:z-10 text-base bg-gray-50 dark:bg-gray-700 transition duration-150 ease-in-out" placeholder="Email address">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none relative block w-full px-4 py-3 border border-gray-300 dark:border-gray-600 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-indigo-500 dark:focus:ring-purple-500 focus:border-indigo-500 dark:focus:border-purple-500 focus:z-10 text-base bg-gray-50 dark:bg-gray-700 transition duration-150 ease-in-out" placeholder="Password">
        </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-indigo-600 dark:text-purple-600 focus:ring-indigo-500 dark:focus:ring-purple-500 border-gray-300 dark:border-gray-600 rounded">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-200"> Remember me </label>
          </div>
          <div class="text-sm">
            <a href="#" class="font-medium text-indigo-600 dark:text-purple-600 hover:text-indigo-500 dark:hover:text-purple-500 transition duration-150 ease-in-out"> Forgot your password? </a>
          </div>
        </div>
        <div>
          <button type="submit" class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-lg font-bold rounded-md text-white bg-indigo-600 dark:bg-purple-600 hover:bg-indigo-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-purple-500 transition duration-150 ease-in-out transform hover:-translate-y-0.5 hover:scale-105">
            Sign in
          </button>
        </div>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          Don't have an account?
          <a href="#" class="font-medium text-indigo-600 dark:text-purple-600 hover:text-indigo-500 dark:hover:text-purple-500 transition duration-150 ease-in-out"> Sign up </a>
        </p>
      </div>
    </div>
  </div>
</div>

Brutalism_Music_Audio_Form

사탕/달콤한 색 구성표를 가진 음악/오디오 플랫폼을 위한 복잡하고 브루탈리즘 스타일의 형태로, 다양한 입력 유형, 다크 모드 지원 및 완전한 응답성을 특징으로 합니다.

열다 미리 보기

                <div class="min-h-screen bg-[#FFF0F5] dark:bg-[#1A001A] p-4 sm:p-8 font-sans transition-colors duration-300">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#0FFF00] bg-[#FFC0CB] dark:bg-[#4B0082] p-6 sm:p-10 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-24 h-24 bg-[#00FFFF] dark:bg-[#FFD700] transform -translate-x-12 -translate-y-12 rotate-45 border-4 border-black dark:border-white"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-[#FF1493] dark:bg-[#00BFFF] transform translate-x-16 translate-y-16 -rotate-30 border-4 border-black dark:border-white"></div>

    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-black dark:text-white mb-4 sm:mb-6 leading-tight select-none uppercase tracking-wide border-b-4 border-black dark:border-white pb-2">
      <span class="block transform -rotate-2 inline-block bg-[#00FFFF] dark:bg-[#FFD700] px-3 py-1 mr-2">AUDIO</span> UPLOAD
    </h1>
    <p class="text-lg sm:text-xl text-black dark:text-white mb-8 select-none font-bold italic ">
      Unleash your sound, now on our platform. Brutally simple. Sweetly effective.
    </p>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
      <div class="mb-4 col-span-full md:col-span-1">
        <label for="song-title" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Song / Track Title
        </label>
        <input type="text" id="song-title" name="song-title" placeholder="e.g., 'Synthwave Dreamscape'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
      </div>

      <div class="mb-4 col-span-full md:col-span-1">
        <label for="artist-name" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Artist / Band Name
        </label>
        <input type="text" id="artist-name" name="artist-name" placeholder="e.g., 'Neon Echoes'" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono">
      </div>

      <div class="mb-4 col-span-full">
        <label for="genre" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Genre
        </label>
        <select id="genre" name="genre" class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 text-lg sm:text-xl font-mono appearance-none pr-8 bg-no-repeat bg-[length:24px_24px] bg-[right_1rem_center] bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')] dark:bg-[url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>')]" style="background-image:
          url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');">
          <option value="">Select a genre...</option>
          <option value="electronic">Electronic</option>
          <option value="rock">Rock</option>
          <option value="hip-hop">Hip-Hop</option>
          <option value="pop">Pop</option>
          <option value="classical">Classical</option>
          <option value="jazz">Jazz</option>
          <option value="ambient">Ambient</option>
          <option value="synthwave">Synthwave</option>
          <option value="vaporwave">Vaporwave</option>
          <option value="other">Other</option>
        </select>
      </div>

      <div class="mb-4 col-span-full">
        <label for="description" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Track Description\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(Max 500 chars)</span>
        </label>
        <textarea id="description" name="description" rows="5" maxlength="500" placeholder="Tell us about your track: its mood, inspiration, or how it was made..." class="w-full p-3 sm:p-4 bg-[#A3EAAA] dark:bg-[#2F4F4F] text-black dark:text-white border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] focus:outline-none focus:border-[#9D00FC] dark:focus:border-[#0FFF00] transition-all duration-200 placeholder-black dark:placeholder-white::placeholder text-lg sm:text-xl font-mono resize-y"></textarea>
      </div>

      <div class="mb-4 col-span-full">
        <label for="album-art" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Album Art\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(PNG, JPG, max 5MB)</span>
        </label>
        <div class="flex flex-col sm:flex-row items-center gap-4">
          <input type="file" id="album-art" name="album-art" accept="image/png, image/jpeg" class="hidden" onchange="document.getElementById('album-art-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
          <label for="album-art" class="inline-block px-6 py-3 sm:py-4 bg-[#FFD700] dark:bg-[#50C878] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] hover:shadow-[6px_6px_0_0_#FF1493] dark:hover:shadow-[6px_6px_0_0_#00BFFF] hover:bg-[#FFC0CB] dark:hover:bg-[#4B0082] transition-all duration-200 select-none">
            Choose File
          </label>
          <span id="album-art-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
        </div>
      </div>

      <div class="mb-4 col-span-full">
        <label for="audio-file" class="block text-black dark:text-white text-lg sm:text-xl font-bold mb-2 uppercase tracking-wider select-none">
          Audio File\u00a0<span class="text-[#9D00FC] dark:text-[#0FFF00] text-sm italic">(MP3, WAV, max 50MB)</span>
        </label>
        <div class="flex flex-col sm:flex-row items-center gap-4">
          <input type="file" id="audio-file" name="audio-file" accept="audio/mpeg, audio/wav" class="hidden" onchange="document.getElementById('audio-file-name').innerText = this.files[0] ? this.files[0].name : 'No file chosen'">
          <label for="audio-file" class="inline-block px-6 py-3 sm:py-4 bg-[#00FFFF] dark:bg-[#FFD700] text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer border-4 border-black dark:border-white shadow-[4px_4px_0_0_#9D00FC] dark:shadow-[4px_4px_0_0_#0FFF00] hover:shadow-[6px_6px_0_0_#9D00FC] dark:hover:shadow-[6px_6px_0_0_#0FFF00] hover:bg-[#A3EAAA] dark:hover:bg-[#2F4F4F] transition-all duration-200 select-none">
            Upload Audio
          </label>
          <span id="audio-file-name" class="text-black dark:text-white text-lg sm:text-xl font-mono">No file chosen</span>
        </div>
      </div>

      <div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <input type="checkbox" id="explicit" name="explicit" class="hidden peer">
        <label for="explicit" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#A3EAAA] dark:bg-[#2F4F4F] shadow-[4px_4px_0_0_#FF69B4] dark:shadow-[4px_4px_0_0_#00FFFF] cursor-pointer peer-checked:bg-[#FF1493] dark:peer-checked:bg-[#00BFFF] transition-all duration-200 overflow-hidden">
          <span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
        </label>
        <label for="explicit" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
          Contains Explicit Content
        </label>
      </div>

      <div class="mb-4 col-span-full flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <input type="checkbox" id="terms" name="terms" class="hidden peer">
        <label for="terms" class="relative flex items-center justify-center p-1 w-8 h-8 sm:w-10 sm:h-10 border-4 border-black dark:border-white bg-[#FFD700] dark:bg-[#50C878] shadow-[4px_4px_0_0_#FF1493] dark:shadow-[4px_4px_0_0_#00BFFF] cursor-pointer peer-checked:bg-[#9D00FC] dark:peer-checked:bg-[#0FFF00] transition-all duration-200 overflow-hidden">
          <span class="absolute text-3xl sm:text-4xl text-black dark:text-white transform scale-0 peer-checked:scale-100 transition-transform duration-200 ease-out leading-none pointer-events-none -mt-1">\u2713</span>
        </label>
        <label for="terms" class="text-black dark:text-white text-lg sm:text-xl font-bold uppercase cursor-pointer select-none">
          I agree to the <a href="#" class="underline font-extrabold text-[#FF1493] dark:text-[#00BFFF] hover:text-[#9D00FC] dark:hover:text-[#0FFF00] transition-colors duration-200">Terms of Service</a>
        </label>
      </div>

      <div class="col-span-full mt-4 sm:mt-6">
        <button type="submit" class="w-full px-8 py-4 bg-[#FF69B4] dark:bg-[#00FFFF] text-black dark:text-white text-2xl sm:text-3xl font-extrabold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#9D00FC] dark:shadow-[8px_8px_0_0_#FFD700] hover:shadow-[12px_12px_0_0_#9D00FC] dark:hover:shadow-[12px_12px_0_0_#FFD700] hover:bg-[#FF1493] dark:hover:bg-[#00BFFF] transition-all duration-200 cursor-pointer active:translate-x-1 active:translate-y-1 active:shadow-[4px_4px_0_0_black] dark:active:shadow-[4px_4px_0_0_white] select-none">
          SUBMIT MY SOUND
        </button>
      </div>
    </form>
  </div>
</div>

이미지 라이트박스 구성 요소

모노스페이스/개발자 디자인, 레트로/빈티지 색 구성표, 암호화폐/블록체인 미학을 갖춘 반응형 이미지 라이트박스 구성 요소입니다. 탐색 컨트롤, 이미지 설명 및 다크 모드 지원 기능이 있습니다.

열다 미리 보기

                <div class="font-mono bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-lime-300 min-h-screen p-4 flex items-center justify-center">
  <div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50" id="lightbox-overlay">
    <div class="relative bg-gray-900 border border-lime-600 shadow-lg shadow-lime-900/50 rounded-lg overflow-hidden max-w-5xl w-full mx-auto p-4 md:p-8 transform transition-all duration-300 scale-95 opacity-0" id="lightbox-content">
      <!-- Close Button -->
      <button class="absolute top-2 right-2 text-lime-400 hover:text-lime-200 text-2xl font-bold p-2 focus:outline-none focus:ring-2 focus:ring-lime-500 rounded-lg z-10" onclick="document.getElementById('lightbox-overlay').classList.add('hidden'); document.getElementById('lightbox-content').classList.remove('scale-100', 'opacity-100');" aria-label="Close Lightbox">
        &times;
      </button>

      <!-- Lightbox Header -->
      <div class="flex items-center justify-between border-b pb-4 mb-4 border-dashed border-gray-700/50">
        <h2 class="text-xl md:text-2xl text-lime-400 font-bold tracking-tight uppercase flex items-center">
          <svg class="w-6 h-6 mr-2 text-yellow-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="M9.75 17L9.25 12L12.5 17L15 12L17.25 17M21 12H3M21 16H3M21 8H3M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
          <span class="text-orange-400">BLOCK</span><span class="text-cyan-400">SYNCH</span>_TX_VIEW
        </h2>
        <div class="flex items-center space-x-2 text-sm text-gray-500 hidden md:flex">
          <span class="text-yellow-400">STATUS:</span> <span class="text-green-500">ACTIVE</span>
          <span class="text-cyan-400">|</span>
          <span class="text-pink-400">LOGGED:</span> <span class="text-white">0xDEADBEEF...</span>
        </div>
      </div>

      <div class="flex flex-col lg:flex-row gap-4 lg:gap-8">
        <!-- Image Area -->
        <div class="relative flex-1 bg-gray-800 border border-gray-700 rounded-md overflow-hidden flex items-center justify-center p-2">
          <img src="https://picsum.photos/1024/768?random=1" alt="Blockchain Transaction Visual" class="max-h-[calc(100vh-200px)] object-contain rounded-sm" id="lightbox-image">
          <!-- Navigation Buttons -->
          <button class="absolute left-2 top-1/2 -translate-y-1/2 p-3 bg-gray-700/70 text-lime-400 hover:bg-gray-600/90 rounded-full focus:outline-none focus:ring-2 focus:ring-lime-500 transition shadow-lg" aria-label="Previous Image">
            <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>
          <button class="absolute right-2 top-1/2 -translate-y-1/2 p-3 bg-gray-700/70 text-lime-400 hover:bg-gray-600/90 rounded-full focus:outline-none focus:ring-2 focus:ring-lime-500 transition shadow-lg" aria-label="Next Image">
            <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="M9 5l7 7-7 7"></path></svg>
          </button>
        </div>

        <!-- Details and Description -->
        <div class="lg:w-1/3 flex flex-col space-y-4 text-sm">
          <div class="bg-gray-800 p-4 border border-gray-700 rounded-md">
            <h3 class="text-lg font-bold text-lime-400 mb-2 border-b border-dashed border-gray-700 pb-2">[IMAGE:001] DETAILS</h3>
            <p class="text-gray-400"><strong class="text-cyan-400">FILE_ID:</strong> <span class="text-orange-300">TXN_A7F3C8_VISUAL</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">TYPE:</strong> <span class="text-purple-300">BLOCK_CHAIN_GRAPH</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">STATUS:</strong> <span class="text-green-400">CONFIRMED</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">SIZE:</strong> <span class="text-yellow-300">1.2 MB</span></p>
            <p class="text-gray-400"><strong class="text-cyan-400">RESOLUTION:</strong> <span class="text-red-300">1024x768</span></p>
          </div>

          <div class="bg-gray-800 p-4 border border-gray-700 rounded-md flex-grow">
            <h3 class="text-lg font-bold text-lime-400 mb-2 border-b border-dashed border-gray-700 pb-2">DESCRIPTION</h3>
            <p class="text-gray-300 leading-relaxed" id="lightbox-description">
              SYNCHRONIZED_BLOCK_TRANSACTION_VISUALIZATION. Depicts the flow of data across a distributed ledger network. Identifiers are obfuscated for security protocols. Genesis block indicated by <span class="text-green-500">GREEN_NODE</span>. Current chain state validated. ERROR_RATE: <span class="text-red-400">0.00%</span>.
            </p>
            <p class="text-gray-500 mt-4 text-xs italic">Access Log: <span class="text-yellow-400">2023-10-27 10:30:45 UTC</span></p>
          </div>

          <div class="bg-gray-800 p-4 border border-gray-700 rounded-md">
            <h3 class="text-lg font-bold text-lime-400 mb-2 border-b border-dashed border-gray-700 pb-2">OPERATOR PROFILE</h3>
            <div class="flex items-center space-x-3">
              <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Operator Avatar" class="w-10 h-10 rounded-full border-2 border-lime-500">
              <div>
                <p class="text-lime-300 font-bold">AGENT_0x7FFE</p>
                <p class="text-gray-400 text-sm">ROLE: SYSTEM_AUDITOR</p>
              </div>
            </div>
          </div>

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

  <!-- Sample trigger element (hidden as the lightbox starts open for demonstration) -->
  <button onclick="document.getElementById('lightbox-overlay').classList.remove('hidden'); document.getElementById('lightbox-content').classList.add('scale-100', 'opacity-100');" class="px-6 py-3 bg-lime-700 text-white rounded-md hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-lime-500 hidden">
    Open Lightbox
  </button>

  <script>
    // This is a minimal JS for demonstration of initial state and closing. 
    // Full lightbox functionality (e.g., image loading, nav) would require more JS.
    document.addEventListener('DOMContentLoaded', () => {
      const lightboxOverlay = document.getElementById('lightbox-overlay');
      const lightboxContent = document.getElementById('lightbox-content');

      // Make the lightbox visible on page load for immediate demonstration
      lightboxOverlay.classList.remove('hidden');
      setTimeout(() => {
        lightboxContent.classList.add('scale-100', 'opacity-100');
      }, 50); // Small delay for the transition effect
    });
  </script>
</div>

CAPTCHA 구성 요소

스위스/국제 타이포그래피 디자인 스타일과 생생한 색 구성표를 갖춘 복잡하고 반응이 빠른 CAPTCHA 구성 요소로, CRM/비즈니스 도구에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6 md:p-8">
    <h2 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white text-center sm:text-3xl lg:text-4xl">
      Security Check
    </h2>
    <p class="text-sm text-gray-600 dark:text-gray-300 text-center leading-relaxed mb-4">
      Please complete the security check to proceed.
    </p>

    <div class="space-y-4">
      <!-- CAPTCHA Display Area -->
      <div class="relative bg-gradient-to-r from-red-500 via-pink-500 to-purple-500 p-1 rounded-md shadow-inner">
        <div class="w-full h-24 sm:h-32 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden relative">
          <span class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-blue-800 dark:text-blue-200 tracking-widest leading-none select-none italic transform -rotate-6">
            kL5pQRt9
          </span>
          <!-- Noise Overlay -->
          <div class="absolute inset-0 bg-gradient-to-br from-transparent to-black opacity-10 dark:opacity-20 pointer-events-none"></div>
          <div class="absolute inset-0 flex items-center justify-center p-2">
            <!-- Placeholder lines or distortions -->
            <div class="w-full h-px bg-yellow-400 absolute top-1/3 left-0 transform rotate-3"></div>
            <div class="w-full h-px bg-green-400 absolute bottom-1/4 right-0 transform -rotate-5"></div>
          </div>
        </div>
      </div>

      <!-- Input Field -->
      <div>
        <label for="captcha-input" class="sr-only">Enter CAPTCHA here</label>
        <input type="text" id="captcha-input" placeholder="Enter the text above" class="w-full p-3 sm:p-4 border border-blue-400 dark:border-blue-600 rounded-md focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 dark:focus:border-blue-700 dark:bg-gray-700 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 outline-none text-base sm:text-lg tracking-wider transition-all duration-200 ease-in-out">
      </div>

      <!-- Action Buttons -->
      <div class="grid grid-cols-2 gap-3 sm:gap-4 md:flex md:justify-end md:space-x-4">
        <button type="button" class="w-full md:w-auto p-3 sm:p-4 text-center text-sm sm:text-base font-medium rounded-md focus:outline-none focus:ring-4 transition-all duration-200 ease-in-out
          bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 focus:ring-blue-300 dark:focus:ring-blue-800 shadow-sm">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005 7c-1.378 0-2.684.254-3.86-.713a1 1 0 010-1.419A1 1 0 012 4h-.002zm14 8a1 1 0 01-1 1v2.101a7.002 7.002 0 01-11.601 2.566 1 1 0 111.885.666A5.002 5.002 0 0015 13c1.378 0 2.684.254 3.86.713a1 1 0 010 1.419A1 1 0 0118 16h-.002z" clip-rule="evenodd" />
          </svg>
          Refresh
        </button>

        <button type="submit" class="w-full md:w-auto p-3 sm:p-4 text-center text-sm sm:text-base font-semibold rounded-md focus:outline-none focus:ring-4 transition-all duration-200 ease-in-out
          bg-gradient-to-r from-teal-500 to-emerald-600 text-white hover:from-teal-600 hover:to-emerald-700 focus:ring-teal-300 dark:focus:ring-teal-800 shadow-lg">
          Verify
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 sm:h-6 sm:w-6 inline-block ml-2" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
        </button>
      </div>
    </div>

    <div class="pt-4 border-t border-gray-200 dark:border-gray-700 text-center">
      <p class="text-xs text-gray-500 dark:text-gray-400">
        Having trouble? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">Contact support</a>
      </p>
    </div>
  </div>
</div>

로그인 양식 구성 요소

따뜻한 무채색, 마이크로 인터랙션에 중점을 둔 디자인, 다크 모드 지원을 갖춘 간단하고 반응이 빠른 로그인 양식 구성 요소로, 예약 및 예약 시스템에 적합합니다.

열다 미리 보기

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 space-y-6 transform hover:scale-[1.01] transition-all duration-300 ease-in-out">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center tracking-tight leading-tight">
      Welcome Back!
    </h2>
    <p class="text-center text-gray-500 dark:text-gray-400 text-sm md:text-base">
      Sign in to manage your bookings and reservations.
    </p>
    <form class="space-y-6">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Email address
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
          required
          class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-200 ease-in-out hover:border-gray-400 dark:hover:border-gray-500 focus:ring-2 focus:ring-offset-1 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
          placeholder="[email protected]"
        />
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Password
        </label>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="current-password"
          required
          class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-amber-500 focus:border-amber-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white transition-all duration-200 ease-in-out hover:border-gray-400 dark:hover:border-gray-500 focus:ring-2 focus:ring-offset-1 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
          placeholder="••••••••"
        />
      </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-gray-300 rounded dark:border-gray-600 dark:checked:bg-amber-600 dark:checked:border-transparent transition-transform duration-200 ease-in-out transform hover:scale-110 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800"
          />
          <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
            Remember me
          </label>
        </div>

        <div class="text-sm">
          <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 ease-in-out">
            Forgot your password?
          </a>
        </div>
      </div>

      <div>
        <button
          type="submit"
          class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-semibold text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-800 transition-all duration-200 ease-in-out transform hover:scale-[1.01] active:scale-95"
        >
          Sign in
        </button>
      </div>
    </form>

    <div class="text-center text-sm md:text-base">
      <p class="text-gray-600 dark:text-gray-400">
        Don't have an account?
        <a href="#" class="font-medium text-amber-600 hover:text-amber-500 dark:text-amber-500 dark:hover:text-amber-400 transition-colors duration-200 ease-in-out">
          Sign up now
        </a>
      </p>
    </div>
  </div>
</div>

1 ... 42 43 44 45 46 ... 335

검색 구성 요소

카테고리

모든 구성 요소