구성 요소 위시리스트 위시리스트 컴포넌트

위시리스트 컴포넌트

컨설팅/서비스를 위한 반응형 위시리스트 구성 요소로, 머티리얼 디자인 원칙, 네온/일렉트릭 색 구성표 및 다크 모드 지원을 특징으로 합니다. 이미지, 제목, 설명 및 '견적 요청' 버튼과 함께 항목에 대한 '제거' 버튼이 있는 서비스를 표시합니다.

미리 보기

HTML 코드

<div class="p-4 sm:p-6 md:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center mb-12 text-zinc-900 dark:text-white leading-tight" style="text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF, 0 0 15px #00FFFF, 0 0 20px #00FFFF;">
      Your <span class="text-cyan-500 dark:text-cyan-400">Service</span> Wishlist
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <!-- Item 1 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-cyan-400 dark:hover:border-cyan-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=1" alt="Strategic Planning" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(0,255,255,0.3);">Strategic Planning</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Develop robust strategies that align with your business goals, ensuring long-term growth and success in competitive markets.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-teal-600 dark:text-teal-400">$1200 - $3500</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/40 dark:shadow-cyan-700/60
                           hover:from-cyan-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Strategic Planning">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 2 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-lime-400 dark:hover:border-lime-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=2" alt="Digital Transformation" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(128,255,0,0.3);">Digital Transformation</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Guide your organization through the complexities of digital evolution, leveraging technology for enhanced efficiency and innovation.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-lime-600 dark:text-lime-400">$2000 - $5000</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-lime-500 to-green-600 shadow-lg shadow-lime-500/40 dark:shadow-lime-700/60
                           hover:from-lime-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-lime-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Digital Transformation">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 3 -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-fuchsia-400 dark:hover:border-fuchsia-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=3" alt="Operations Optimization" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(255,0,255,0.3);">Operations Optimization</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Streamline your operational processes for maximum efficiency, reducing costs and improving overall productivity.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-fuchsia-600 dark:text-fuchsia-400">$900 - $2800</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-fuchsia-500 to-purple-600 shadow-lg shadow-fuchsia-500/40 dark:shadow-fuchsia-700/60
                           hover:from-fuchsia-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Operations Optimization">
              Request Quote
            </button>
          </div>
        </div>
      </div>

      <!-- Item 4 (Example additional item) -->
      <div class="relative flex flex-col bg-white dark:bg-zinc-800 rounded-xl shadow-lg dark:shadow-zinc-700/50 overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:hover:shadow-zinc-700/70 border border-transparent hover:border-orange-400 dark:hover:border-orange-600">
        <button class="absolute top-3 right-3 p-2 bg-gradient-to-br from-red-500 to-rose-600 rounded-full shadow-md text-white text-sm font-semibold transition-transform duration-200 hover:scale-105 active:scale-95 z-10" aria-label="Remove item">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd" />
          </svg>
        </button>
        <img src="https://picsum.photos/600/400?random=4" alt="Market Research" class="w-full h-48 object-cover rounded-t-xl">
        <div class="p-6 flex flex-col flex-grow">
          <h3 class="text-2xl font-bold text-zinc-900 dark:text-white mb-2 leading-snug tracking-wide" style="text-shadow: 0 0 3px rgba(255,165,0,0.3);">Market Research</h3>
          <p class="text-base text-zinc-600 dark:text-zinc-300 mb-4 flex-grow">
            Gain deep insights into market trends, customer behavior, and competitive landscapes to inform your strategic decisions.
          </p>
          <div class="mt-auto flex justify-between items-center">
            <span class="text-xl font-bold text-orange-600 dark:text-orange-400">$800 - $2500</span>
            <button class="px-5 py-2.5 rounded-full text-sm font-semibold text-white transition-all duration-300 transform hover:scale-105 active:scale-95
                           bg-gradient-to-br from-orange-500 to-red-600 shadow-lg shadow-orange-500/40 dark:shadow-orange-700/60
                           hover:from-orange-600 hover:to-red-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900"
                    aria-label="Request quote for Market Research">
              Request Quote
            </button>
          </div>
        </div>
      </div>

    </div>

    <div class="text-center mt-12 mb-4">
      <button class="px-8 py-4 rounded-full text-lg font-bold text-white transition-all duration-300 transform hover:scale-105 active:scale-95 selection:from-sky-400 selection:to-blue-400
                     bg-gradient-to-br from-indigo-600 to-purple-700 shadow-2xl shadow-indigo-500/50 dark:shadow-indigo-700/70
                     hover:from-indigo-700 hover:to-purple-800 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900">
        Proceed to Checkout
      </button>
    </div>

  </div>
</div>

관련 구성 요소

아르데코 위시리스트 컴포넌트

1920-1930년대 럭셔리에서 영감을 받은 복잡하고 반응형 아르데코 스타일의 위시리스트 구성 요소로, 금융/은행 인터페이스에 적합한 보석 톤을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

위시리스트 부동산 구성 요소

부동산 부동산을 위한 반응형 및 고대비 위시리스트 구성 요소로, 머티리얼 디자인 원칙에서 영감을 받았으며 다크 모드를 지원합니다.

열다

위시리스트 컴포넌트

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 위시리스트 컴포넌트. 이미지, 제목, 가격이 있는 항목 목록을 표시하고 버튼을 제거합니다. 생생한 색상의 대시보드를 위해 설계되었습니다.

열다