CCHub Logo CCHub Tailwind Collection
コンポーネント プログレスバー プログレスバーコンポーネント

プログレスバーコンポーネント

パステルカラーの配色のダークモード用に設計されたレスポンシブプログレスバーコンポーネントで、ビジネス/企業のWebサイトに適しています。

プレビュー

HTMLコード 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
    <h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
    <div class="relative pt-1">
        <div class="flex justify-between mb-1 text-sm text-white">
            <span>0%</span>
            <span>100%</span>
        </div>
        <div class="h-2 bg-gray-600 rounded">
            <div class="bg-pastel-green-500 h-full rounded" style="width: 70%;"></div>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
            <span class="text-white">John Doe</span>
        </div>
        <span class="text-gray-400 dark:text-gray-500">In Progress</span>
    </div>
</div>

関連コンポーネント

Glassmorphism_EarthTones_ProgressBar_ForumComponent

アースカラーのレスポンシブglassmorphismプログレスバーコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。ぼかし効果とダークモードのサポートを備えたすりガラスのような半透明の要素が特徴です。

開ける

ニューモーフィズムプログレスバー

ポートフォリオ用のニューモーフィズムスタイルのプログレスバーで、パステルカラーの配色、適度な複雑さ、応答性、ダークテーマのサポートが特徴です。JavaScriptは含まれていません。コンポーネントは HTML と Tailwind CSS で構築されています。

開ける

Brutalist_ProgressBar

マーケットプレイスプラットフォームに適したハイコントラストのブルータリズムスタイルのプログレスバーコンポーネントで、大胆な色とシンプルなレイアウトが特徴で、完全な応答性とダークモードがサポートされています。

開ける