CCHub Logo CCHub Tailwind Collection
구성 요소 레이아웃 구성 요소 Layout Components 컴포넌트

Layout Components 컴포넌트

스큐어모픽 스타일로 디자인된 반응형 웹 구성 요소로, 비즈니스/기업 웹 사이트를 위한 단색 색 구성표를 특징으로 합니다. 풍부한 인터페이스를 위한 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg dark:bg-gray-900">
  <h1 class="text-3xl font-bold mb-4">Corporate Dashboard</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Company Overview</h2>
      <img src="https://picsum.photos/200/100" alt="Company Overview" class="rounded-lg mb-2" />
      <p class="mb-2">Overview of company performance and metrics. Check out the latest updates and key statistics.</p>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Details</button>
    </div>
    <div class="bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
      <h2 class="text-xl font-semibold">Team Members</h2>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Member 1" class="w-12 h-12 rounded-full mr-3" />
        <p>John Doe - CEO</p>
      </div>
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Member 2" class="w-12 h-12 rounded-full mr-3" />
        <p>Jane Smith - CTO</p>
      </div>
      <button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">View Team</button>
    </div>
  </div>
  <div class="mt-4 bg-gray-700 p-4 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-xl font-semibold">Latest Reports</h2>
    <ul class="list-disc pl-5">
      <li><a href="#" class="text-blue-400 hover:underline">Q1 2023 Financial Report</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Market Trends Analysis</a></li>
      <li><a href="#" class="text-blue-400 hover:underline">Competitor Comparison</a></li>
    </ul>
  </div>
</div>

관련 구성 요소

E-commerce 레이아웃 구성 요소

머티리얼 디자인 원칙에 따라 Tailwind CSS로 빌드된 어두운 테마를 지원하는 반응형 전자상거래 레이아웃 구성 요소입니다. 여기에는 탐색 모음, 제품 목록이 있는 기본 콘텐츠 영역 및 바닥글이 포함됩니다. 색 구성표는 파스텔입니다.

열다

Glassmorphism 사업 레이아웃

어스 톤을 특징으로 하는 Tailwind CSS를 사용하여 다크 모드를 지원하는 간단하고 반응이 빠른 glassmorphism 레이아웃 구성 요소입니다.

열다

Layout Components 컴포넌트

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

열다