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