CCHub Logo CCHub Tailwind Collection
コンポーネント 価格表示 価格表示コンポーネント

価格表示コンポーネント

モノスペース/開発者の美学とレトロ/ビンテージカラーパレットを備えたシンプルでクリーンな価格表示コンポーネントで、天気/気候データ用に設計されています。

プレビュー

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">&deg;C</span>
      </div>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">[ Feels Like: 17&deg;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>

関連コンポーネント

価格表示コンポーネント

ソーシャルメディアインターフェース用に設計された、単色の配色を備えた3Dにインスパイアされた価格表示コンポーネント。これは、ダークモードをサポートする複雑で応答性の高いコンポーネントで、Tailwind CSSを使用して構築されています。JavaScriptは含まれていません。

開ける

価格表示コンポーネント

丸みを帯びた要素と類似の配色を備えた遊び心のある陽気な価格表示コンポーネントで、作品や製品を展示するポートフォリオに適しています。完全にレスポンシブで、ダークモードをサポートしています。

開ける

価格表示コンポーネント

補色(ソフトオレンジとライトブルー)を備えたNeumorphismスタイルの価格表示コンポーネントで、eコマースには適度な複雑さがあります。ダークテーマをサポートするレスポンシブデザインが特徴です。このコンポーネントには、商品画像、タイトル、価格が表示され、[カートに追加] ボタンが表示されます。ダークモードでは、彩度の低い補色が使用されます。

開ける