검색 구성 요소

카테고리

가격 표시

제품 가격 정보를 표시하는 구성 요소

가격 표시 구성 요소

대시보드 사용을 위한 미니멀리스트/플랫 디자인 가격 표시 구성 요소로, 반응형 디자인과 다크 모드 지원을 특징으로 합니다.

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-xs mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Overview</h2>
    <div class="flex items-center justify-between mb-4">
        <span class="text-lg font-semibold text-gray-700 dark:text-gray-300">Current Price</span>
        <span class="text-2xl font-extrabold text-blue-500 dark:text-blue-300">$99.99</span>
    </div>
    <div class="flex items-center justify-between">
        <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="rounded-full">
        <div>
            <span class="text-sm text-gray-600 dark:text-gray-400">Last updated: 2 hours ago</span>
        </div>
    </div>
    <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-500">View Details</button>
</div>

가격 표시 구성 요소

실제 요소를 모방한 스큐어모픽 스타일로 설계된 복잡한 가격 표시 구성 요소로, 트라이어딕 색 구성표와 다크 모드를 지원하는 반응형 디자인으로 블로그 및 콘텐츠 소비에 적합합니다.

열다 미리 보기

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Price Display</h2>
    <div class="flex items-center justify-between mb-4">
        <img src="https://picsum.photos/80" alt="Product Image" class="w-20 h-20 rounded-full shadow-md border border-gray-300 dark:border-gray-600">
        <div class="flex-shrink-0">
            <span class="text-lg font-semibold text-gray-800 dark:text-white">$199.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-300">/ each</span>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-6">This product is designed to give you the best experience and thus comes with an assurance of quality and excellent service.</p>
    <div class="flex items-center justify-between border-t border-gray-200 dark:border-gray-600 pt-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow-md">Buy Now</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded shadow-md">Add to Cart</button>
    </div>
    <footer class="mt-4 text-gray-500 dark:text-gray-400 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto mb-1">
        <span class="text-sm">Posted by John Doe</span>
    </footer>
</div>

가격 표시 구성 요소

대시보드용 복잡하고 반응형이 빠른 가격 표시 구성 요소로, 어두운 테마를 지원하며 회색조의 미니멀한 플랫 디자인에 Tailwind CSS를 사용합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-sm w-full">
  <div class="flex justify-between items-center mb-4">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Current Price</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Updated: Just Now</span>
  </div>
  <div class="flex items-center mb-6">
    <div class="text-4xl font-bold text-gray-900 dark:text-white">$1,234.56</div>
    <div class="flex items-center ml-4">
      <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
      <span class="text-lg font-semibold text-green-500">+1.23%</span>
    </div>
  </div>
  <div class="border-t border-gray-200 dark:border-gray-700 pt-4">
    <div class="text-sm text-gray-600 dark:text-gray-300 mb-2">Historical Data:</div>
    <div class="flex space-x-4">
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">High</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,250.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Low</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">$1,200.00</div>
      </div>
      <div class="text-center">
        <div class="text-md font-semibold text-gray-800 dark:text-white">Volume</div>
        <div class="text-sm text-gray-600 dark:text-gray-300">10k</div>
      </div>
    </div>
  </div>
</div>

가격 표시 구성 요소

3D에서 영감을 받은 가격 표시 구성 요소로, 소셜 미디어 인터페이스용으로 설계된 단색 색 구성표가 있습니다. Tailwind CSS를 사용하여 빌드된 다크 모드를 지원하는 복잡하고 반응이 빠른 구성 요소입니다. JavaScript는 포함되어 있지 않습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6"> <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden"> <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div> <div class="relative z-10 p-8"> <div class="text-center mb-8"> <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Pro Plan</h2> <p class="text-gray-600 dark:text-gray-400">Unlock all features</p> </div> <div class="text-center mb-8"> <span class="text-6xl font-extrabold text-gray-900 dark:text-[var(--monochromatic-color)]">$49</span> <span class="text-2xl font-semibold text-gray-700 dark:text-gray-300">/month</span> </div> <ul class="mb-8 space-y-4"> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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> Unlimited Users </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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> 100GB Storage </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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> Email Support </li> <li class="flex items-center text-gray-700 dark:text-gray-300"> <svg class="w-6 h-6 text-green-500 mr-3" 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> Custom Analytics </li> </ul> <a href="#" class="block w-full py-3 text-center text-white font-bold bg-blue-600 dark:bg-[var(--dark-monochromatic-color)] rounded-lg hover:bg-blue-700 dark:hover:bg-[var(--darker-monochromatic-color)] transition duration-300 ease-in-out transform hover:scale-105 shadow-lg"> Get Started </a> </div> </div> <div class="absolute bottom-0 right-0 -mb-20 -mr-20 w-40 h-40 bg-blue-500 dark:bg-[var(--monochromatic-accent-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div> <div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-40 h-40 bg-purple-500 dark:bg-[var(--monochromatic-secondary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000"></div> <div class="absolute top-0 right-0 -mt-20 -mr-20 w-40 h-40 bg-pink-500 dark:bg-[var(--monochromatic-tertiary-color)] rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div> </div>

가격 표시 구성 요소

뉴모피즘(Neumorphism) 스타일과 보색 구성표를 사용하는 반응형 가격 표시 구성 요소로, 다크 모드를 지원하는 블로그 콘텐츠용으로 설계되었습니다.

열다 미리 보기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Price Card -->
  <div class="w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">

    <!-- Card Header -->
    <div class="flex justify-between items-center mb-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Basic Plan</h3>
      <span class="text-2xl font-bold text-blue-600 dark:text-teal-400">$29</span>
    </div>

    <!-- Card Features -->
    <ul class="space-y-4 text-gray-700 dark:text-gray-300">
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>
        <span>10 Users</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>
        <span>50GB Storage</span>
      </li>
      <li class="flex items-center">
        <svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-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>
        <span>Email Support</span>
      </li>
    </ul>

    <!-- Call to Action Button -->
    <div class="mt-8">
      <button class="w-full py-3 rounded-lg font-semibold text-white bg-blue-600 dark:bg-teal-600 shadow-neumorphic-button-light dark:shadow-neumorphic-button-dark transition duration-300 hover:opacity-90">
        Get Started
      </button>
    </div>

  </div>

  <!-- Custom Neumorphism Shadows (defined in CSS) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
       box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #363636;
    }
     .shadow-neumorphic-button-light {
      box-shadow: 5px 5px 10px #a7a7a7, -5px -5px 10px #ffffff;
    }
     .dark .shadow-neumorphic-button-dark {
       box-shadow: 5px 5px 10px #4a4a4a, -5px -5px 10px #363636;
    }
  </style>

</div>

가격 표시 구성 요소

레트로/빈티지 미학과 생생한 색상으로 스타일링된 반응형 가격 표시 구성 요소로, 소셜 미디어 인터페이스에 적합하며 다크 모드를 지원합니다.

열다 미리 보기

                <div class="max-w-xs mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
        <div class="flex items-center mb-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
            <div class="ml-3">
                <h2 class="text-lg text-violet-600 dark:text-violet-400 font-bold">John Doe</h2>
                <span class="text-sm text-gray-600 dark:text-gray-300">@johndoe</span>
            </div>
        </div>
        <h3 class="text-2xl text-red-600 dark:text-red-400 font-semibold mb-2">$49.99</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Original Vintage T-Shirt from the 80s.</p>
        <button class="w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-200">Add to Cart</button>
    </div>
</div>

가격 표시 구성 요소

레트로/빈티지 미학, 반응형 디자인 및 다크 모드를 지원하는 가격 표시 구성 요소.

열다 미리 보기

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="sm:flex sm:items-center px-6 py-4">
        <div class="text-center sm:text-left sm:flex-grow">
            <div class="mb-4">
                <p class="text-xl font-bold text-gray-900 dark:text-white">Product Name</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Product Description</p>
            </div>
            <div class="flex justify-center sm:justify-start items-baseline">
                <span class="text-2xl font-bold text-gray-900 dark:text-white">$</span>
                <span class="text-4xl font-bold text-gray-900 dark:text-white">19.99</span>
                <span class="text-sm text-gray-600 dark:text-gray-400">/month</span>
            </div>
            <div class="mt-4">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Buy Now
                </button>
            </div>
        </div>
    </div>
</div>

가격 표시 구성 요소

Neumorphism 스타일의 가격 표시 구성 요소는 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

열다 미리 보기

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="w-full max-w-sm p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl dark:shadow-xl-dark">
    <div class="flex justify-between items-center">
      <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200">Pro Plan</h3>
      <span class="text-xl font-bold text-gray-600 dark:text-gray-300">$29</span>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mt-2 text-sm">billed monthly</p>
    <ul class="mt-4 space-y-2 text-gray-600 dark:text-gray-400">
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>Unlimited projects</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>10GB storage</span>
      </li>
      <li class="flex items-center">
        <svg class="h-5 w-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
        <span>Priority support</span>
      </li>
    </ul>
    <button class="mt-6 w-full py-3 bg-blue-500 text-white rounded-md font-bold shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">
      Choose Plan
    </button>
  </div>
</div>

<style>
.shadow-xl {
  box-shadow: 10px 10px 20px #babecc, -10px -10px 20px #ffffff;
}
.dark .shadow-xl-dark {
  box-shadow: 10px 10px 20px #718096, -10px -10px 20px #4a5568;
}
</style>

가격 표시 구성 요소

반응형 및 다크 모드를 지원하는 최소 가격 표시 구성 요소

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"></svg>
    </span>
  </div>
  <h3 class="mt-5 text-base font-medium tracking-tight text-slate-900 dark:text-white">Price</h3>
  <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
    <span class="text-2xl font-bold text-slate-900 dark:text-white">$99.99</span>/month
  </p>
</div>

가격 표시 구성 요소

다크 모드와 반응형 효과를 지원하는 3D 스타일의 가격 표시 구성 요소로, 제품 가격 세부 정보를 보여줍니다.

열다 미리 보기

                <div class="max-w-sm mx-auto p-5 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition-transform transform hover:scale-105">
    <div class="flex flex-col items-center">
        <img src="https://picsum.photos/200" alt="Product Image" class="w-full h-48 object-cover rounded-md shadow-md mb-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Name</h2>
        <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here, highlighting features and benefits.</p>
        <div class="flex flex-row items-baseline mb-4">
            <span class="text-2xl font-bold text-gray-800 dark:text-white">$49.99</span>
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-2">/ month</span>
        </div>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-sm text-gray-600 dark:text-gray-400">5 reviews</span>
        </div>
        <button class="mt-4 py-2 px-4 bg-blue-500 text-white rounded-md shadow-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200">Buy Now</button>
    </div>
</div>