CCHub Logo CCHub Tailwind Collection
구성 요소 그리드 레이아웃 Skeuomorphism 생생한 그리드 레이아웃

Skeuomorphism 생생한 그리드 레이아웃

다크 모드 지원, 스큐어모피즘 디자인, 생생한 색상, 중간 정도의 복잡성을 갖춘 반응형 그리드 레이아웃 구성 요소, 포트폴리오에 적합합니다.

미리 보기

HTML 코드 

<!-- Grid Layout Container -->
<div class="container mx-auto p-4 dark:bg-gray-900">

  <!-- Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

    <!-- Grid Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 1</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 1 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-blue-400" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
      </div>
    </div>

    <!-- Grid Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 2</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 2 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-purple-400" src="https://randomuser.me/api/portraits/women/76.jpg" alt="Avatar">
      </div>
    </div>

    <!-- Grid Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 transform transition duration-500 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt="Project Image">
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Project Title 3</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of project 3 showcasing skills and technologies used.</p>
      <div class="flex justify-between items-center">
        <a href="#" class="text-blue-500 dark:text-blue-400 hover:underline font-semibold">View Project</a>
        <img class="w-8 h-8 rounded-full ring-2 ring-green-400" src="https://randomuser.me/api/portraits/men/77.jpg" alt="Avatar">
      </div>
    </div>
    
    <!-- Add more grid items as needed -->

  </div>

</div>

관련 구성 요소

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

Tailwind CSS를 사용하여 Brutalism 스타일로 설계된 반응형 그리드 레이아웃 구성 요소로, 어두운 테마 지원과 임의의 자리 표시자 이미지를 특징으로 합니다.

열다

레트로/빈티지 이커머스 그리드 레이아웃

레트로/빈티지 및 파스텔 톤의 반응형 다크 테마 지원 그리드 레이아웃 구성 요소로, 전자 상거래 제품 디스플레이를 위한 것입니다. Tailwind CSS를 사용하고 모의 이미지와 아바타를 포함합니다.

열다

아르 데코 게이밍 그리드 레이아웃

반응형 아르데코에서 영감을 받은 게임 그리드 레이아웃은 기하학적 패턴, 회색조 색상 및 인터랙티브 요소를 특징으로 합니다. 게임 웹사이트 및 인터페이스용으로 설계되었으며 다크 모드를 지원합니다.

열다