CCHub Logo CCHub Tailwind Collection
구성 요소 레이아웃 구성 요소 레이아웃 구성 요소

레이아웃 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 블로그 레이아웃 구성요소로, 단색 색 구성표를 사용하고 어두운 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 min-h-screen p-6">
    <div class="container mx-auto">
        <header class="text-center mb-10">
            <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200">My Blog</h1>
            <p class="text-gray-600 dark:text-gray-400">Insights, stories, and thoughts</p>
        </header>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=1" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. In hac habitasse platea dictumst...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
            <article class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-5">
                <img src="https://picsum.photos/300/200?random=2" alt="Blog post image" class="rounded-md mb-4"/>
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Curabitur nec libero vel arcu elementum mattis...</p>
                <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline">Read more</a>
            </article>
        </div>
        <footer class="mt-10 text-center">
            <p class="text-gray-600 dark:text-gray-400">© 2023 My Blog. All rights reserved.</p>
        </footer>
    </div>
</div>

관련 구성 요소

Layout Components 컴포넌트

어두운 테마를 지원하는 소셜 미디어 애플리케이션을 위한 Material Design 원칙을 따르는 반응형 웹 구성 요소 레이아웃입니다.

열다

Consulting_Services_Pricing_Table_Monospace_Pastel

컨설팅 서비스를 위한 반응형 가격표 구성 요소로, 파스텔 색 구성표와 함께 고정폭/개발자 미학을 특징으로 합니다. 다크 모드 지원과 서비스 계층을 표시하는 데 적합한 깔끔한 레이아웃이 포함됩니다.

열다

Glassmorphism_Social_Media_Layout_Component

복잡하고 반응이 빠른 소셜 미디어 레이아웃 구성 요소로, 반투명 반투명 요소, 흐림 효과 및 보색 구성표가 있는 glassmorphism 디자인을 특징으로 합니다. 사이드바, 기본 콘텐츠 영역, 오른쪽 사이드바가 포함되어 있으며 모두 다크 모드를 지원합니다.

열다