CCHub Logo CCHub Tailwind Collection
구성 요소 컨테이너 컨테이너 구성 요소

컨테이너 구성 요소

매력적인 마이크로 인터랙션과 어두운 테마가 있는 간단하고 반응이 빠른 대시보드 컨테이너로, 유사한 색상에 초점을 맞춥니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
    <h1 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Dashboard</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-blue-200 dark:bg-blue-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-blue-700 dark:text-blue-300">User Profile</span>
            </div>
            <img src="https://picsum.photos/300/200?random=1" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-green-200 dark:bg-green-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-green-700 dark:text-green-300">Analytics</span>
            </div>
            <img src="https://picsum.photos/300/200?random=2" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-red-200 dark:bg-red-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-red-700 dark:text-red-300">Notifications</span>
            </div>
            <img src="https://picsum.photos/300/200?random=3" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg hover:scale-105 transition-transform duration-300">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
                <span class="text-lg font-medium text-yellow-700 dark:text-yellow-300">Settings</span>
            </div>
            <img src="https://picsum.photos/300/200?random=4" alt="Sample Image" class="w-full h-auto rounded-lg">
        </div>
    </div>
</div>

관련 구성 요소

Glassmorphism 포트폴리오 컨테이너

Tailwind CSS를 사용하는 포트폴리오 웹 사이트에 맞게 조정된 다크 모드 지원 기능이 있는 반응형 Glassmorphism 컨테이너 구성 요소입니다. 젖빛 유리 효과, 트라이어드 색 구성표, 여러 인터랙티브 요소가 특징이며 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

열다

E-commerce 컨테이너 구성 요소

Glassmorphism E-commerce Container Component with Triadic Color Scheme and Complex Layout, including Dark Mode Support

열다

부동산 리스팅 카드 - 수채화/네온

수채화/예술적 부드러운 배경과 네온/일렉트릭 컬러 구성표가 있는 복잡한 부동산 리스팅 카드입니다. 부동산 세부 정보, 에이전트 정보 및 가격을 제공하며 완전한 응답성과 다크 모드를 지원합니다.

열다