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>

관련 구성 요소

Layout Components 컴포넌트

실제 세계를 모방한 스큐어모픽 스타일로 디자인된 레이아웃 구성 요소로, Tailwind CSS를 사용하여 반응형 요소와 어두운 테마를 지원합니다.

열다

Layout Components 컴포넌트

Tailwind CSS를 사용하여 Glassmorphism 스타일, 생생한 색 구성표 및 어두운 테마를 지원하는 반응형 대시보드 레이아웃 구성 요소입니다. 사이드바와 젖빛 유리와 같은 반투명 요소와 흐림 효과가 있는 주요 콘텐츠 영역이 있습니다.

열다

Layout Components 컴포넌트

어두운 테마가 있는 반응형 대시보드 레이아웃 구성 요소로, 사이드바와 기본 콘텐츠 영역을 제공합니다. 시각적 호소력을 위해 트라이어드 색 구성표를 사용합니다.

열다