CCHub Logo CCHub Tailwind Collection
コンポーネント レイアウトコンポーネント Glassmorphism ダッシュボードのレイアウト

Glassmorphism ダッシュボードのレイアウト

半透明のすりガラスのような要素を備えたダッシュボードのシンプルなglassmorphismレイアウトで、パステルカラーの配色とダークモードのサポートが特徴です。

プレビュー

HTMLコード 

<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-900 backdrop-blur-lg rounded-lg shadow-lg p-6 m-4 w-full max-w-3xl">
        <h1 class="text-2xl font-semibold text-gray-800 dark:text-white">Dashboard</h1>
        <div class="mt-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">User Statistics</h2>
                    <img src="https://picsum.photos/300/200?random=1" alt="User Statistics Image" class="w-full rounded-lg mt-2" />
                </div>
                <div class="bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                    <h2 class="font-medium text-gray-700 dark:text-gray-200">Recent Activities</h2>
                    <img src="https://picsum.photos/300/200?random=2" alt="Recent Activities Image" class="w-full rounded-lg mt-2" />
                </div>
            </div>
            <div class="mt-4 bg-opacity-50 bg-white dark:bg-gray-700 backdrop-blur-lg rounded-lg p-4 shadow-md">
                <h2 class="font-medium text-gray-700 dark:text-gray-200">Control Panel</h2>
                <img src="https://picsum.photos/300/200?random=3" alt="Control Panel Image" class="w-full rounded-lg mt-2" />
            </div>
        </div>
        <div class="flex justify-between items-center mt-4">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800">
                <span class="ml-2 text-gray-700 dark:text-gray-200">John Doe</span>
            </div>
            <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Logout</button>
        </div>
    </div>
</div>

関連コンポーネント

レイアウトコンポーネントコンポーネント

現実世界の対応物を模倣したスキューモーフィック スタイルで設計されたレイアウト コンポーネントで、レスポンシブ要素と Tailwind CSS を使用したダーク テーマのサポートを備えています。

開ける

Eコマースレイアウトコンポーネント

グレースケールのマテリアルデザインの美学を備えたシンプルでレスポンシブなeコマースレイアウトコンポーネントで、製品グリッド、ヘッダー、フッターがあり、すべてダークモードがサポートされています。商品画像にはpicsum.photosを使用します。

開ける

3D レイアウトコンポーネント

魅力的なビジュアルを備えたレスポンシブな3Dデザインレイアウトコンポーネントで、影やレイヤーを通じて奥行きを取り入れています。ダークモードのサポートが含まれており、ランダムな画像とアバターを備えています。

開ける