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