가격 표시 구성 요소
모노스페이스/개발자 미학과 레트로/빈티지 색상 팔레트가 있는 단순하고 깔끔한 가격 표시 구성 요소로, 날씨/기후 데이터를 위해 설계되었습니다.
HTML 코드
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-mono">
<div class="w-full max-w-sm rounded-lg shadow-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 overflow-hidden">
<div class="flex justify-between items-center bg-blue-200 dark:bg-blue-900 p-3 border-b border-gray-300 dark:border-gray-700">
<span class="text-blue-800 dark:text-blue-200 text-sm font-semibold uppercase tracking-wider">[ METEO REPORT ]</span>
<span class="text-gray-600 dark:text-gray-400 text-xs">ONLINE</span>
</div>
<div class="p-4 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-1">CURRENT TEMPERATURE</p>
<div class="flex items-baseline justify-center mb-3">
<span class="text-5xl md:text-6xl font-bold text-teal-600 dark:text-teal-400">18</span>
<span class="text-2xl text-teal-600 dark:text-teal-400">°C</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17°C ]</p>
<div class="text-left space-y-1 text-sm md:text-base">
<p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">HUMIDITY:</span> <span class="text-purple-600 dark:text-purple-400">65%</span></p>
<p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">WIND SPD:</span> <span class="text-purple-600 dark:text-purple-400">12 KM/H</span></p>
<p class="flex justify-between items-center"><span class="text-gray-700 dark:text-gray-300">PRESSURE:</span> <span class="text-purple-600 dark:text-purple-400">1012 HPA</span></p>
</div>
</div>
<div class="bg-blue-100 dark:bg-blue-800 p-3 pt-2 text-xs border-t border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300">
<p class="flex justify-between"><span class="text-blue-700 dark:text-blue-300">STATUS:</span> <span class="text-green-600 dark:text-green-400">CLEAR SKIES</span></p>
</div>
</div>
</div>