검색 구성 요소

모든 구성 요소

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

사이버펑크 농업 진행 지표

농업 또는 농업 웹사이트를 위한 미래지향적인 사이버펑크 테마의 진행 지표 세트로, 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원으로 반응형.

                <div class="bg-zinc-950 text-orange-400 min-h-screen p-4 sm:p-8 dark:bg-black dark:text-orange-300 font-mono">
  <div class="max-w-7xl mx-auto py-8 lg:py-12">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-8 sm:mb-12 tracking-wide uppercase leading-tight text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-red-600 dark:from-yellow-300 dark:to-orange-500 drop-shadow-md">
      Agro-Bot 7.0: Crop Cycle Nexus
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Progress Card 1: Planting Phase -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-600 to-red-800 rounded-full opacity-20 blur-xl dark:from-yellow-500 dark:to-orange-700"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Planting Protocol</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:animate-pulse dark:text-red-600" 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.663 17h4.673M12 21h.01M17 7h3a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V9a2 2 0 012-2h3m0 0V5a2 2 0 012-2h2a2 2 0 012 2v2M7 7h10"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Seed deployment and initial nutrient injection. Progress critical for sprout emergence.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 85%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">85% Complete</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
          Last Check: 10/26/23 14:30 GMT
        </div>
      </div>

      <!-- Progress Card 2: Growth Monitoring -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Biomass Accumulation</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:animate-spin dark:text-orange-600" 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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Real-time monitoring of crop growth and health indicators. AI-driven pathogen detection.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 60%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">60% Data Collected</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8h4a4 4 0 100-8H8zm0 7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
          Next Scan: 10/27/23 08:00 GMT
        </div>
      </div>

      <!-- Progress Card 3: Resource Optimization -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Hydro-Energy Flow</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:scale-125 transition-transform duration-300 dark:text-orange-600" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Water and nutrient delivery system status. Awaiting recalibration of soil sensors.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 40%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">40% Optimized</div>
        <div class="mt-5 flex items-start text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-red-500 animate-bounce" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.3 2.672-1.3 3.437 0L14.4 7.252c1.346 2.241-.019 5.06-2.5 5.06h-5.8c-2.481 0-3.847-2.819-2.5-5.06l2.744-4.503z" clip-rule="evenodd"></path></svg>
          <span class="text-red-500 uppercase font-bold">Alert:</span> Sensor Array Offline
        </div>
      </div>

      <!-- Progress Card 4: Harvesting Forecast -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-orange-400 to-red-600 rounded-full opacity-20 blur-xl dark:from-yellow-300 dark:to-orange-500"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Yield Prediction</h3>
          <svg class="h-8 w-8 text-orange-500 group-hover:rotate-12 transition-transform duration-300 dark:text-red-600" 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 19v-6a2 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"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Forecasting harvest dates and estimated output based on current growth data.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-orange-500 to-red-700 h-3 rounded-full" style="width: 75%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">75% Confidence</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://picsum.photos/id/1015/30/30" alt="Farm Worker Avatar" class="rounded-full w-6 h-6 mr-2 border border-orange-500 dark:border-yellow-400">
          Analyst: Unit Alpha-7
        </div>
      </div>

      <!-- Progress Card 5: Supply Chain Logistics -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-yellow-500 to-orange-700 rounded-full opacity-20 blur-xl dark:from-red-600 dark:to-orange-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Logistics Network</h3>
          <svg class="h-8 w-8 text-yellow-500 group-hover:translate-x-1 transition-transform duration-300 dark:text-orange-600" 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 17v-5m3 5v-1.11a3 3 0 011.66-2.793L16.2 8.3c.75-.414 1.25-.133 1.25.75V17m-9 4h6a2 2 0 002-2v-3a2 2 0 00-2-2H9a2 2 0 00-2 2v3a2 2 0 002 2z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Coordination of automated transport units and storage facilities. Route optimization initiated.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-yellow-500 to-orange-700 h-3 rounded-full" style="width: 90%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">90% Routes Optimized</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-7-8a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
          Status: Auto-Dispatch Active
        </div>
      </div>

      <!-- Progress Card 6: Environmental Impact -->
      <div class="bg-zinc-900 border border-orange-700/50 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden group hover:scale-[1.02] transition-transform duration-300 ease-in-out dark:bg-gray-950 dark:border-red-800/60">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-red-600 to-yellow-500 rounded-full opacity-20 blur-xl dark:from-orange-700 dark:to-red-800"></div>
        <div class="flex items-center justify-between mb-5">
          <h3 class="text-2xl font-bold text-orange-300 dark:text-yellow-400">Eco-Footprint Analysis</h3>
          <svg class="h-8 w-8 text-red-500 group-hover:animate-pulse dark:text-orange-600" 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="M7 11V7a2 2 0 012-2h4a2 2 0 012 2v4m-.586 1.707a2 2 0 002.828 0L20 10.414V17a2 2 0 01-2 2H6a2 2 0 01-2-2V7.414L6.586 5.828a2 2 0 000-2.828z"></path></svg>
        </div>
        <p class="text-sm text-zinc-500 mb-4 dark:text-gray-400">Analyzing resource consumption and waste generation for sustainability metrics. Goal: Carbon Negative.</p>
        <div class="w-full bg-zinc-800 rounded-full h-3 mb-2 dark:bg-gray-800">
          <div class="bg-gradient-to-r from-red-500 to-orange-700 h-3 rounded-full" style="width: 95%;"></div>
        </div>
        <div class="text-right text-sm text-orange-400 dark:text-yellow-300">95% Reviewed</div>
        <div class="mt-5 flex items-center text-sm text-zinc-500 dark:text-gray-400">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Environmentalist Avatar" class="rounded-full w-6 h-6 mr-2 border border-red-500 dark:border-orange-500">
          Validated by: Dr. Neo Verde
        </div>
      </div>

    </div>

    <div class="text-center mt-12 sm:mt-16">
      <button class="px-8 py-3 rounded-full text-lg font-bold uppercase tracking-wider
        bg-gradient-to-r from-orange-600 to-red-800 text-white shadow-lg 
        hover:from-orange-700 hover:to-red-900 focus:outline-none focus:ring-4 
        focus:ring-orange-500 focus:ring-opacity-75 transition-all duration-300 
        transform hover:scale-105 active:scale-95
        dark:from-yellow-500 dark:to-orange-700 dark:hover:from-yellow-600 dark:hover:to-orange-800
        dark:focus:ring-yellow-400 dark:shadow-red-800/40">
        Initiate System Recalibration
      </button>
    </div>

  </div>
</div>

아르데코 캔디 제품 카드

아르데코에서 영감을 받은 디자인과 경쾌한 캔디 색상 구성표를 갖춘 반응형 제품 카드 구성 요소로 예약 및 예약 시스템에 적합합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

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

    <!-- Product Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-pink-300 dark:border-blue-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-400 dark:from-purple-700 dark:via-blue-600 dark:to-cyan-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
        <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-pink-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>

      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-purple-600 dark:to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M8 4a3 3 0 00-3 3v2H2a2 2 0 00-2 2v5a2 2 0 002 2h16a2 2 0 002-2v-5a2 2 0 00-2-2h-3V7a3 3 0 00-3-3H8zM5 7a1 1 0 011-1h8a1 1 0 011 1v2H5V7zm10 4H5v5h10v-5z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300 mb-2 tracking-wide">Sweet Serenity</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Your moment of tranquil bliss.</p>
        
        <div class="border-t border-b border-pink-200 dark:border-blue-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" 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> 60 Mins Session</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Flexible Schedule</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-cyan-400 mb-6">$120</p>

        <button class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-purple-800 dark:to-blue-800 text-white font-bold rounded-lg shadow-lg hover:from-pink-600 hover:to-purple-600 dark:hover:from-purple-700 dark:hover:to-blue-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-blue-600">
          Book Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-mint-300 dark:border-purple-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-mint-400 via-blue-300 to-pink-400 dark:from-blue-700 dark:via-cyan-600 dark:to-purple-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-mint-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-mint-300 to-blue-300 dark:from-blue-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6.672 1.911a1.102 1.102 0 011.656 0L10 3.333l1.672-1.422a1.102 1.102 0 011.656 0L14.414 4H17a1 1 0 011 1v9a1 1 0 01-1 1h-3.414l-1.656 1.422a1.102 1.102 0 01-1.656 0L10 16.667l-1.672-1.422-1.656 1.422a1.102 1.102 0 01-1.656 0L2.586 15H1a1 1 0 01-1-1V5a1 1 0 011-1h2.586l1.672-1.422zM2 6v7h16V6H2zm8 3a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-mint-600 dark:text-mint-300 mb-2 tracking-wide">Gleaming Glow</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Radiate from the inside out.</p>

        <div class="border-t border-b border-mint-200 dark:border-purple-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" 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> 90 Mins Treatment</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Weekend Slots</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-pink-500 dark:text-purple-400 mb-6">$180</p>

        <button class="w-full py-4 bg-gradient-to-r from-mint-500 to-blue-500 dark:from-blue-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-mint-600 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-mint-400 dark:focus:ring-purple-600">
          Reserve Spot
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-blue-300 dark:border-cyan-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-400 via-pink-300 to-mint-400 dark:from-cyan-700 dark:via-purple-600 dark:to-blue-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-blue-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-blue-300 to-pink-300 dark:from-cyan-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10l2-2H4zm11.59 10.37L12 18.06V20h4v-1.94l-3.59-3.69z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M8 10a2 2 0 11-4 0 2 2 0 014 0zm10.59 4.37L16 18.06V20h4v-1.94l-3.59-3.69zM12 10a2 2 0 11-4 0 2 2 0 014 0zm.59-4.37L16 2.06V0h4v1.94l-3.59 3.69z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-2 tracking-wide">Jubilee Journey</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">An unforgettable personal retreat.</p>

        <div class="border-t border-b border-blue-200 dark:border-cyan-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" 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> 120 Mins Deluxe</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Priority Booking</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-blue-400 mb-6">$250</p>

        <button class="w-full py-4 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-cyan-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-blue-600 hover:to-cyan-600 dark:hover:from-cyan-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-cyan-600">
          Schedule Now
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* This custom CSS is for the artistic border using clip-path, 
     as Tailwind currently does not support arbitrary clip-path values directly. */
  .clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  }
</style>

Badges 구성 요소

문서 또는 Wiki 사이트를 위한 우아하고 반응이 빠른 배지 구성 요소로, 흙색 색 구성표, 고급스러운 타이포그래피 및 완전한 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="font-sans antialiased bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-sm md:max-w-xl lg:max-w-2xl bg-white dark:bg-stone-800 rounded-xl shadow-lg p-6 sm:p-8 border border-stone-200 dark:border-stone-700">
    <h2 class="text-2xl sm:text-3xl font-serif font-semibold mb-6 text-stone-900 dark:text-stone-100 border-b pb-4 border-stone-200 dark:border-stone-700">
      Documentation Status Badges
    </h2>

    <div class="flex flex-wrap gap-3 mb-6">
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50">
        <svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <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>
        Approved
      </span>
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-amber-100 text-amber-800 dark:bg-amber-700 dark:text-amber-50">
        <svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.542 2.705-1.542 3.47 0L12 6.75A2.25 2.25 0 0110 9a2.25 2.25 0 01-2-2.25L8.257 3.099zM7.5 10.5a.75.75 0 000 1.5h5a.75.75 0 000-1.5h-5z" clip-rule="evenodd" />
        </svg>
        Pending Review
      </span>
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-700 dark:text-red-50">
        <svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <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" />
        </svg>
        Needs Revision
      </span>
      <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-stone-100 text-stone-800 dark:bg-stone-700 dark:text-stone-50">
        Draft
      </span>
    </div>

    <h3 class="text-xl sm:text-2xl font-serif font-semibold mb-4 text-stone-900 dark:text-stone-100 border-b pb-3 border-stone-200 dark:border-stone-700">
      Content Tags
    </h3>
    <div class="flex flex-wrap gap-2">
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
        API Reference
      </span>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
        Getting Started
      </span>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
        Troubleshooting
      </span>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
        Best Practices
      </span>
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-stone-200 text-stone-800 dark:bg-stone-600 dark:text-stone-100">
        Security
      </span>
    </div>
  </div>
</div>

Community Forum 구성 요소

스포츠/피트니스 애플리케이션용으로 설계된 간단하고 깔끔하며 신뢰할 수 있는 커뮤니티 포럼 구성 요소로, 멀티 컬러 그라데이션 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg max-w-4xl mx-auto font-sans">
  <div class="text-center mb-6 sm:mb-8">
    <h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold pb-2 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Team Talk Hub
    </h2>
    <p class="text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed">
      Connect with your teammates and discuss game strategies.
    </p>
  </div>

  <div class="space-y-4">
    <!-- Forum Post 1 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-blue-500 to-purple-500 p-0.5" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar of John Doe">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">John Doe</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        Great effort everyone in training today! Let's keep up the intensity for Saturday's match. Any thoughts on offensive plays?
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>

    <!-- Forum Post 2 -->
    <article class="bg-white dark:bg-gray-800 p-4 sm:p-5 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 transition-all duration-300 hover:shadow-lg">
      <div class="flex items-center mb-3">
        <img class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-transparent bg-gradient-to-r from-teal-500 to-cyan-500 p-0.5" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Avatar of Jane Smith">
        <div>
          <h4 class="font-semibold text-gray-900 dark:text-white text-base sm:text-lg">Jane Smith</h4>
          <p class="text-gray-500 dark:text-gray-400 text-xs sm:text-sm">1 hour ago</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base leading-relaxed mb-3">
        I agree, John! Maybe we could try that new set piece we practiced? It felt really strong. Looking forward to the game!
      </p>
      <button class="text-blue-600 dark:text-blue-400 hover:underline text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
        Reply
      </button>
    </article>
  </div>

  <div class="mt-6 sm:mt-8">
    <button class="w-full py-2 px-4 rounded-lg font-semibold text-white bg-gradient-to-r from-purple-600 via-pink-600 to-red-600 dark:from-purple-500 dark:via-pink-500 dark:to-red-500 hover:from-purple-700 hover:via-pink-700 hover:to-red-700 dark:hover:from-purple-600 dark:hover:via-pink-600 dark:hover:to-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 transition-colors duration-300">
      Create New Post
    </button>
  </div>
</div>

등급 시스템 구성 요소

대시보드 애플리케이션에 적합한 미니멀하고 평평한 디자인 등급 구성 요소로, 보석 톤과 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
  <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center sm:text-left">Overall Satisfaction</h2>
  <div class="flex items-center justify-center sm:justify-start mb-4">
    <div class="flex space-x-1">
      <!-- Active Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <!-- Inactive Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-gray-300 dark:text-gray-600 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
    </div>
    <span class="ml-3 text-lg sm:text-xl font-bold text-gray-800 dark:text-white">4.0</span>
  </div>
  <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 text-center sm:text-left">Based on 125 ratings</p>
</div>

Glassmorphism 오디오 플레이어 컴포넌트

제조/산업 인터페이스용으로 설계된 복잡한 유리 형태 스타일의 오디오 플레이어 구성 요소로, 고대비 색상, 완전한 응답성 및 다크 모드 지원을 특징으로 합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-900 to-gray-900 dark:from-gray-900 dark:to-black p-4">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl p-6 md:p-8 lg:p-10 shadow-2xl relative overflow-hidden backdrop-filter backdrop-blur-lg border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700" style="background-color: rgba(255, 255, 255, 0.08); dark:background-color: rgba(0, 0, 0, 0.2);">
    <!-- Background elements for glassmorphism effect -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
    <div class="absolute bottom-0 left-0 w-32 h-32 bg-green-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-white text-center">
      <h2 class="text-2xl md:text-3xl font-extrabold mb-2 uppercase tracking-wide text-white dark:text-gray-100 drop-shadow-lg">Industrial Audio Feed</h2>
      <p class="text-sm md:text-base text-gray-200 dark:text-gray-400 mb-6 drop-shadow-md">Monitoring system broadcasts</p>

      <!-- Album Art / Waveform Placeholder -->
      <div class="w-full h-48 md:h-64 bg-gray-700 bg-opacity-40 rounded-2xl mb-8 flex items-center justify-center overflow-hidden shadow-inner-lg shadow-black/30 dark:shadow-gray-900/50">
        <img src="https://picsum.photos/400/300?random=1" alt="Industrial Sound Wave" class="object-cover w-full h-full opacity-70 blur-sm brightness-75 md:opacity-80 md:blur-none md:brightness-100" aria-hidden="true">
        <div class="absolute w-4/5 h-20 bg-gradient-to-r from-transparent via-blue-500/60 to-transparent rounded-full opacity-60 md:opacity-80" style="box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);"></div>
        <div class="absolute text-white text-3xl md:text-4xl font-bold tracking-wider opacity-90 drop-shadow-lg">
          <span class="uppercase">Live Feed</span>
        </div>
      </div>

      <!-- Track Info -->
      <div class="mb-6">
        <h3 class="text-xl md:text-2xl font-bold mb-1 text-white dark:text-gray-100 drop-shadow-lg">Turbine Gen 5 Status</h3>
        <p class="text-md md:text-lg text-gray-300 dark:text-gray-400 drop-shadow-md">Sector 7 - Control Room</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full mb-6">
        <div class="h-2 bg-white bg-opacity-20 rounded-full drop-shadow-sm">
          <div class="h-full bg-blue-500 rounded-full w-3/4 shadow-md" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-gray-300 dark:text-gray-400">
          <span>02:45</span>
          <span>03:20</span>
        </div>
      </div>

      <!-- Controls -->
      <div class="flex justify-around items-center mb-6">
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Previous track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 md:p-5 rounded-full bg-blue-600 bg-opacity-70 backdrop-filter backdrop-blur-sm hover:bg-opacity-90 transition-all duration-300 shadow-2xl text-white dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-70" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 md:h-10 md:w-10" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.73 5.485c-.975-1.077-2.73-1.077-3.705 0l-4.5 4.975c-.975 1.077-.975 2.828 0 3.905l4.5 4.975c.975 1.077 2.73 1.077 3.705 0l4.5-4.975c.975-1.077.975-2.828 0-3.905l-4.5-4.975z" />
          </svg>
        </button>
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Next track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Volume Control and Settings -->
      <div class="flex items-center justify-between text-gray-300 dark:text-gray-400">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A.999.999 0 0014 9H8a.999.999 0 00-.707 1.707L6 12l.707.707A.999.999 0 008 14h6a.999.999 0 001.536-.536l3.5-3.5a.999.999 0 000-1.414l-3.5-3.5z" />
          </svg>
          <input type="range" min="0" max="100" value="70" class="w-24 md:w-32 lg:w-40 h-1 rounded-full appearance-none outline-none bg-blue-400 transition-all duration-300" style="background: linear-gradient(to right, #60A5FA 70%, rgba(255,255,255,0.3) 70%);" aria-label="Volume slider">
        </div>
        <button class="p-2 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Audio settings">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" 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" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>

      <div class="mt-8 pt-4 border-t border-white border-opacity-10 dark:border-gray-700 text-sm italic text-gray-400 dark:text-gray-500 select-none">
        <p>System v3.1.2 | <span class="font-semibold">Online</span></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for range input thumb (for better glassmorphism integration) */
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']:hover::-webkit-slider-thumb {
    background: #4B90F6; /* slightly darker blue */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  input[type='range']:hover::-moz-range-thumb {
    background: #4B90F6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  /* Keyframes for the blob animation */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

</style>

사이버펑크 팔로우 버튼 구성 요소

CRM/비즈니스 도구를 위한 복잡한 사이버펑크 테마의 '팔로우' 버튼 구성 요소로, 포레스트/그린 색상 팔레트, 어두운 배경, 밝은 네온 액센트를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.

열다 미리 보기

                <div class="flex items-center justify-center p-4 bg-gray-900 min-h-screen dark:bg-black font-mono relative overflow-hidden">

  <!-- Cyberpunk background grid elements -->
  <div class="absolute inset-0 z-0 opacity-10">
    <div class="absolute inset-0 bg-gradient-to-br from-green-900 via-gray-900 to-green-900 animate-pulse-slow"></div>
    <div class="absolute inset-0 bg-grid-pattern-small md:bg-grid-pattern-large opacity-5"></div>
    <div class="absolute inset-0 bg-dots-pattern opacity-5"></div>
  </div>

  <div class="bg-gradient-to-br from-gray-800 to-gray-950 dark:from-gray-950 dark:to-black p-6 md:p-8 rounded-2xl shadow-neon-green border border-green-700/50 relative z-10 w-full max-w-md mx-auto transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
    
    <!-- Glitch effect pseudo-element for aesthetic -->
    <div class="absolute inset-0 rounded-2xl pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-green-500/20 after:via-transparent after:to-green-500/20 after:animate-glitch after:mix-blend-overlay"></div>

    <div class="flex flex-col items-center space-y-6">
      
      <!-- Profile Card Start -->
      <div class="w-full bg-gray-900 dark:bg-black p-4 rounded-xl border border-green-800 shadow-inner-neon relative">
        <div class="relative w-24 h-24 mx-auto mb-4 rounded-full border-2 border-green-400 overflow-hidden shadow-md shadow-green-500/30 ring-2 ring-green-600 ring-offset-2 ring-offset-gray-900">
          <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
          <div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-transparent animate-pulse-fast opacity-50"></div>
        </div>
        <h2 class="text-2xl font-bold text-green-400 text-center uppercase tracking-wide mb-2">Ava Lux</h2>
        <p class="text-sm text-green-200 text-center mb-4">Product Lead at CyberCorp Solutions</p>
        <div class="grid grid-cols-2 gap-2 text-center text-green-300 text-sm">
          <div>
            <span class="block font-bold text-green-400">1.2k</span>
            <span class="block">Followers</span>
          </div>
          <div>
            <span class="block font-bold text-green-400">987</span>
            <span class="block">Following</span>
          </div>
        </div>
        <div class="mt-4 text-xs text-center text-gray-400 border-t border-green-800 pt-3 flex items-center justify-center">
          <svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
          </svg>
          Neo-Tokyo, Block 7
        </div>
      </div>
      <!-- Profile Card End -->

      <!-- Follow Button -->
      <button class="relative w-full py-3 px-6 text-xl font-bold text-black uppercase bg-green-400 rounded-lg overflow-hidden group shadow-lg shadow-green-500/50 transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 button-glow-green">
        <span class="relative z-10">+ Follow</span>
        <div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute inset-0 border-2 border-green-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        <div class="absolute top-1/2 left-1/2 w-4 h-4 bg-green-200 rounded-full blur-sm opacity-0 group-hover:opacity-100 group-hover:animate-ping-small origin-center transition-all duration-500"></div>
      </button>

      <!-- Message & Options Buttons -->
      <div class="grid grid-cols-2 gap-4 w-full">
        <button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
          <span class="relative z-10">Message</span>
        </button>
        <button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
          <span class="relative z-10">Profile</span>
        </button>
      </div>

      <!-- Status / Connection Indicator -->
      <div class="flex items-center text-sm text-green-400 mt-4">
        <span class="relative flex h-3 w-3 mr-2">
          <span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-green-600"></span>
        </span>
        <span>Active Connection // Online</span>
      </div>

    </div>

    <!-- Bottom UI Elements / Accent Lines -->
    <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-green-600 rounded-full shadow-neon-green blur-[1px] opacity-70"></div>
    <div class="absolute top-0 left-0 w-4 h-4 border-l-2 border-t-2 border-green-500 rounded-tl-lg opacity-50"></div>
    <div class="absolute top-0 right-0 w-4 h-4 border-r-2 border-t-2 border-green-500 rounded-tr-lg opacity-50"></div>
    <div class="absolute bottom-0 left-0 w-4 h-4 border-l-2 border-b-2 border-green-500 rounded-bl-lg opacity-50"></div>
    <div class="absolute bottom-0 right-0 w-4 h-4 border-r-2 border-b-2 border-green-500 rounded-br-lg opacity-50"></div>

  </div>
</div>

<style>
  /* Base styles for dark mode */
  :root {
    --tw-shadow-neon-green: 0 0px 10px rgba(50, 205, 50, 0.5), 0 0 20px rgba(50, 205, 50, 0.3), 0 0 30px rgba(50, 205, 50, 0.2);
    --tw-shadow-inner-neon: inset 0 0 5px rgba(50, 205, 50, 0.4), inset 0 0 10px rgba(50, 205, 50, 0.2);
    --color-green-neon: #32CD32; /* LimeGreen */
    --color-green-dark: #1A4d2e; /* Darker Green */
  }

  /* Tailwind specific overrides for custom patterns */
  .bg-grid-pattern-small {
    background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  .bg-grid-pattern-large {
    background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .bg-dots-pattern {
    background-image: radial-gradient(circle, rgba(50,205,50,0.2) 1px, transparent 1px);
    background-size: 10px 10px;
  }

  /* Custom shadow utilities */
  .shadow-neon-green {
    box-shadow: var(--tw-shadow-neon-green);
  }

  .shadow-inner-neon {
    box-shadow: var(--tw-shadow-inner-neon);
  }

  /* Keyframes for animations */
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
  }

  @keyframes pulse-fast {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.7; }
  }

  @keyframes ping-small {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
  }

  @keyframes glitch {
    0% { transform: translate(0, 0); opacity: 0.3; }
    20% { transform: translate(-2px, 2px); opacity: 0.6; }
    40% { transform: translate(-2px, -2px); opacity: 0.4; }
    60% { transform: translate(2px, 2px); opacity: 0.7; }
    80% { transform: translate(2px, -2px); opacity: 0.5; }
    100% { transform: translate(0, 0); opacity: 0.3; }
  }

  /* Apply animations */
  .animate-pulse-slow {
    animation: pulse-slow 8s infinite ease-in-out;
  }

  .animate-pulse-fast {
    animation: pulse-fast 2s infinite ease-in-out;
  }

  .animate-ping-small {
    animation: ping-small 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  .animate-glitch {
    animation: glitch 0.5s infinite alternate;
  }

  /* Button Glitch Effect for hovers */
  .button-hover-glitch:hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
      background-size: 200% 100%;
      animation: glitch-line 0.3s steps(1) infinite alternate;
      opacity: 0.2;
  }

  .button-hover-glitch:hover::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
      background-size: 200% 100%;
      animation: glitch-line 0.3s steps(1) infinite reverse alternate;
      opacity: 0.2;
  }

  @keyframes glitch-line {
    0% { background-position: 0 0; }
    100% { background-position: -200% 0; }
  }

  /* Button Glow Effect */
  .button-glow-green {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
  }

  .button-glow-green::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(50,205,50,0.6) 0%, transparent 70%);
    animation: rotate-glow 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }

  .button-glow-green:hover::before {
    opacity: 1;
  }

  @keyframes rotate-glow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* Dark mode specific styles */
  .dark .bg-gradient-to-br.from-gray-800.to-gray-950 {
    background-image: linear-gradient(to bottom right, #0a0a0a, #000000);
  }
  .dark .shadow-neon-green {
    box-shadow: 0 0px 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.3);
  }
  .dark .shadow-inner-neon {
    box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
  }
  .dark .text-green-400 {
    color: #00FF00; /* Brighter green for dark mode */
  }
  .dark .border-green-700,
  .dark .border-green-800 {
    border-color: #008f00;
  }
  .dark .bg-green-400 {
    background-color: #00e600;
  }
</style>

Memphis_Job_Filters

장난기 넘치는 멤피스 디자인 스타일, 트라이어딕 색 구성표 및 다크 모드 지원을 갖춘 반응형 작업 필터 구성 요소로 구인 게시판 및 경력 플랫폼에 적합합니다.

열다 미리 보기

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 min-h-screen bg-fuchsia-100 dark:bg-gray-900 font-sans">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border-4 border-fuchsia-600 dark:border-cyan-500 relative">
    <!-- Memphis Design Elements -->
    <div class="absolute -top-6 -left-6 w-24 h-24 bg-cyan-400 dark:bg-yellow-400 transform rotate-45 z-0 rounded-lg"></div>
    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-yellow-400 dark:bg-fuchsia-600 transform -rotate-12 z-0 rounded-full opacity-75"></div>
    <div class="absolute top-1/4 left-1/3 w-16 h-16 border-4 border-fuchsia-600 dark:border-cyan-500 rounded-full opacity-50 z-0"></div>

    <div class="p-6 sm:p-8 md:p-10 relative z-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-fuchsia-700 dark:text-cyan-400 mb-6 sm:mb-8 text-center tracking-tight leading-tight">
        Find Your Dream Job
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
        <!-- Keyword Search -->
        <div class="relative">
          <label for="search-keyword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Keyword</label>
          <input type="text" id="search-keyword" placeholder="e.g., Frontend Developer" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
        </div>

        <!-- Location Filter -->
        <div class="relative">
          <label for="search-location" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Location</label>
          <select id="search-location" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Locations</option>
            <option value="remote">Remote</option>
            <option value="new_york">New York, NY</option>
            <option value="san_francisco">San Francisco, CA</option>
            <option value="london">London, UK</option>
            <option value="berlin">Berlin, DE</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Job Type Filter -->
        <div class="relative">
          <label for="job-type" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Job Type</label>
          <select id="job-type" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Types</option>
            <option value="full-time">Full-time</option>
            <option value="part-time">Part-time</option>
            <option value="contract">Contract</option>
            <option value="internship">Internship</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Salary Range Filter -->
        <div class="relative">
          <label for="salary-range" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Salary Range</label>
          <select id="salary-range" class="w-full px-4 py-3 border-2 border-fuchsia-400 dark:border-cyan-600 rounded-md focus:ring-fuchsia-500 focus:border-fuchsia-500 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-fuchsia-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-fuchsia-300 dark:placeholder-cyan-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">Any Salary</option>
            <option value="0-50000">$0 - $50,000</option>
            <option value="50000-80000">$50,000 - $80,000</option>
            <option value="80000-120000">$80,000 - $120,000</option>
            <option value="120000-plus">$120,000+</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-fuchsia-700 dark:text-cyan-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Experience Level Filter -->
        <div class="relative">
          <label for="experience-level" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Experience Level</label>
          <select id="experience-level" class="w-full px-4 py-3 border-2 border-cyan-400 dark:border-yellow-600 rounded-md focus:ring-cyan-500 focus:border-cyan-500 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-cyan-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-cyan-300 dark:placeholder-yellow-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">Any Level</option>
            <option value="entry">Entry Level</option>
            <option value="mid">Mid-Senior Level</option>
            <option value="senior">Director / Executive</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-cyan-700 dark:text-yellow-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>

        <!-- Industry Filter -->
        <div class="relative">
          <label for="industry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Industry</label>
          <select id="industry" class="w-full px-4 py-3 border-2 border-yellow-400 dark:border-fuchsia-600 rounded-md focus:ring-yellow-500 focus:border-yellow-500 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-yellow-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-yellow-300 dark:placeholder-fuchsia-700 appearance-none pr-8 transition duration-300 ease-in-out transform hover:scale-[1.01] focus:scale-[1.02]">
            <option value="">All Industries</option>
            <option value="tech">Technology</option>
            <option value="healthcare">Healthcare</option>
            <option value="finance">Finance</option>
            <option value="education">Education</option>
            <option value="marketing">Marketing</option>
          </select>
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-yellow-700 dark:text-fuchsia-400 top-7">
            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l-.707-.707L6 14.586V3h2v11.586l2.293-2.293l.707.707L10 17l-4-4zM10.707 7.05h0v-.001L14 3l-4 4zM10 3l-4 4h0L6 3h0zM14 17l4-4-4-4-4 4-4-4-4 4z"/></svg>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="mt-8 flex flex-col sm:flex-row justify-center gap-4">
        <button class="px-8 py-3 rounded-full bg-fuchsia-600 hover:bg-fuchsia-700 text-white font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 border-2 border-fuchsia-800 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:border-cyan-700">
          Apply Filters
        </button>
        <button class="px-8 py-3 rounded-full bg-transparent border-2 border-cyan-500 text-cyan-700 hover:bg-cyan-50 dark:border-yellow-500 dark:text-yellow-400 dark:hover:bg-gray-700 font-bold text-lg shadow-lg transform transition duration-300 ease-in-out hover:scale-105 active:scale-95">
          Clear All
        </button>
      </div>

      <!-- Trending Jobs Section - Example Placeholder -->
      <div class="mt-12 pt-8 border-t-2 border-dashed border-fuchsia-300 dark:border-cyan-700">
        <h3 class="text-xl sm:text-2xl font-bold text-fuchsia-700 dark:text-cyan-400 mb-6 text-center">Trending Categories</h3>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          <div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Software Engineering
          </div>
          <div class="p-4 rounded-lg bg-yellow-100 dark:bg-gray-700 border-2 border-yellow-400 dark:border-fuchsia-600 text-center font-medium text-yellow-800 dark:text-fuchsia-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            UI/UX Design
          </div>
          <div class="p-4 rounded-lg bg-fuchsia-100 dark:bg-gray-700 border-2 border-fuchsia-400 dark:border-cyan-600 text-center font-medium text-fuchsia-800 dark:text-cyan-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Data Science
          </div>
          <div class="p-4 rounded-lg bg-cyan-100 dark:bg-gray-700 border-2 border-cyan-400 dark:border-yellow-600 text-center font-medium text-cyan-800 dark:text-yellow-300 transform hover:scale-105 transition duration-200 cursor-pointer">
            Product Management
          </div>
        </div>
      </div>

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

비영리 단체 피드백 구성요소 (3D 스타일)

비영리 단체를 위한 간단하고 반응이 빠른 피드백 구성 요소로, 3D 디자인의 미학과 따뜻한 일몰 톤을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다 미리 보기

                <div class="flex justify-center items-center px-4 py-8 bg-gradient-to-br from-orange-50 to-amber-100 dark:from-gray-950 dark:to-gray-800 min-h-screen font-sans">
  <div class="relative w-full max-w-md p-6 sm:p-8 bg-white rounded-xl shadow-xl transform transition-all duration-300 ease-in-out dark:bg-gray-800 dark:shadow-2xl dark:shadow-amber-900/20 card-3d">
    <!-- 3D effect layers -->
    <div class="absolute inset-0 bg-gradient-to-br from-orange-100 to-amber-200 rounded-xl opacity-0 transform translate-z-10 dark:from-gray-700 dark:to-gray-900 blur-sm card-3d-inner"></div>
    <div class="absolute inset-0 bg-orange-50 rounded-xl opacity-0 transform translate-z-20 dark:bg-gray-600 blur-xs card-3d-inner"></div>

    <div class="relative z-10 text-center">
      <div class="mb-6">
        <svg class="mx-auto h-12 w-12 text-orange-500 dark:text-amber-400 transform -rotate-12 translate-y-1 block" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
        <h3 class="mt-3 text-2xl font-extrabold text-orange-700 dark:text-amber-300 tracking-tight leading-tight origin-left scale-105">
          Share Your Thoughts
        </h3>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
          Help us improve our cause with your valuable feedback.
        </p>
      </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="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-150 ease-in-out text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 3d-input" placeholder="Your Email Address">
        </div>
        <div>
          <label for="feedback" class="sr-only">Your Feedback</label>
          <textarea id="feedback" name="feedback" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 resize-y transition duration-150 ease-in-out text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 3d-input" placeholder="What do you think?"></textarea>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-800 transform active:scale-95 transition-all duration-200 ease-in-out origin-center button-3d">
            Submit Feedback
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<style>
/* Basic 3D Card effect */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d:hover .card-3d-inner:nth-child(1) {
  opacity: 1;
  transform: translateZ(-20px);
}

.card-3d:hover .card-3d-inner:nth-child(2) {
  opacity: 1;
  transform: translateZ(-40px);
}

/* Subtle 3D for inputs */
.3d-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease-in-out;
}
.dark .3d-input {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.3d-input:focus {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.08);
  border-color: #f97316; /* Tailwind orange-500 */
}

.dark .3d-input:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.5);
  border-color: #fcd34d; /* Tailwind amber-300 */
}

/* 3D Button effect */
.button-3d {
  transform: translateZ(0);
  transition: all 0.2s ease-out;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.button-3d:hover {
  transform: translateY(-2px) translateZ(5px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-3d:active {
  transform: translateY(1px) translateZ(-5px);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dark .button-3d {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
}
.dark .button-3d:hover {
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dark .button-3d:active {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

</style>

ProgressBar구성 요소

음식/레스토랑 웹사이트를 위한 네온/일렉트릭 색상의 간단하고 깨끗하며 반응이 빠른 진행률 표시줄 구성 요소로, 다크 모드 지원 및 스위스/국제 타이포그래피 디자인이 특징입니다.

열다 미리 보기

                <div class="font-sans antialiased bg-gray-50 dark:bg-gray-900 p-4 sm:p-6 md:p-8 lg:p-10 flex min-h-screen items-center justify-center">
  <div class="w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 leading-tight border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 sm:mb-3 md:mb-4 tracking-tight">
      Your Order Progress
    </h2>
    <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 mb-6 sm:mb-8 md:mb-10">
      Keep an eye on your delicious order's journey!
    </p>

    <div class="mb-6 sm:mb-8 md:mb-10">
      <div class="flex justify-between items-center mb-2">
        <span class="text-lg sm:text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-pink-500 dark:from-red-400 dark:to-pink-400">
          Preparing Your Feast
        </span>
        <span class="text-sm sm:text-base font-semibold text-gray-800 dark:text-gray-200">
          75%
        </span>
      </div>
      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
        <div class="bg-gradient-to-r from-fuchsia-500 to-pink-500 dark:from-fuchsia-400 dark:to-pink-400 h-3 rounded-full" style="width: 75%;">
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-center sm:text-left">
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Estimated Delivery
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white">
          15-20 min
        </p>
      </div>
      <div class="space-y-1">
        <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 uppercase tracking-wider">
          Order ID
        </p>
        <p class="text-base sm:text-lg md:text-xl font-bold text-gray-900 dark:text-white break-all">
          #FDRM_87Y5XC
        </p>
      </div>
    </div>

  </div>
</div>

1 ... 96 97 98 99 100 ... 335

검색 구성 요소

카테고리

모든 구성 요소