구성 요소 그리드 레이아웃 그리드 레이아웃 구성 요소

그리드 레이아웃 구성 요소

머티리얼 디자인 원칙을 따르는 반응형 그리드 레이아웃 구성 요소로, Tailwind CSS를 사용하여 그림자 효과와 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Design Grid Layout</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?2" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?3" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?4" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 4</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?5" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 5</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/200/300?6" alt="Random Image" class="w-full h-48 object-cover" />
            <div class="p-4">
                <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Card Title 6</h2>
                <p class="text-gray-600 dark:text-gray-400">This is a brief description of the content in the card.</p>
            </div>
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .dark .bg-white { background-color: #1f2937; /* Gray-800 */ }
        .dark .text-gray-700 { color: #e5e7eb; /* Gray-200 */ }
        .dark .text-gray-600 { color: #d1d5db; /* Gray-400 */ }
    }
</style>

관련 구성 요소

그라데이션 그리드 예약 레이아웃

예약/예약 시스템을 위한 복잡하고 반응이 빠른 그리드 레이아웃 구성 요소로, 트라이어딕 색상 그라디언트, 부드러운 전환 및 다크 모드 지원을 제공합니다. 여러 대화형 요소로 설계되었습니다.

열다

Industrial_Juwel_Tones_Grid_Layout_Component

컨설팅/서비스를 위한 반응형 그리드 레이아웃 구성 요소로, 보석 색조의 산업적 미학을 특징으로 합니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

포트폴리오를 위한 3D 그리드 레이아웃 구성 요소

보색을 사용하는 포트폴리오를 위한 복잡하고 반응이 빠른 3D 스타일의 그리드 레이아웃 구성 요소로, 다크 모드 지원 및 picsum.photos의 이미지가 있습니다.

열다