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

価格表示コンポーネント

ダッシュボード用のミニマリスト/フラットデザインの価格表示コンポーネントで、レスポンシブデザインとダークモードのサポートが特徴です。

プレビュー

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>

関連コンポーネント

価格表示コンポーネント

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

開ける

価格表示コンポーネント

ダッシュボード用の複雑でレスポンシブな価格表示コンポーネントで、ダークテーマをサポートし、グレースケールのミニマリストフラットデザインでTailwind CSSを使用しています。

開ける

価格表示コンポーネント

レトロ/ビンテージの美学と鮮やかな色でスタイリングされたレスポンシブな価格表示コンポーネントで、ソーシャルメディアインターフェイスに適しており、ダークモードをサポートしています。

開ける