CCHub Logo CCHub Tailwind Collection
구성 요소 그리드 레이아웃 Course_Grid_Layout_Component

Course_Grid_Layout_Component

교육 플랫폼을 위한 반응형이고 시각적으로 매력적인 그리드 레이아웃 구성 요소로, 따뜻한 일몰 톤, 머티리얼 디자인 그림자 및 다크 모드 지원이 있는 코스 카드를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="bg-gradient-to-br from-orange-50 to-amber-100 py-12 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-800 mb-8 text-center dark:text-amber-300">
      Explore Our Courses
    </h2>
    <p class="text-lg text-orange-700 mb-12 text-center max-w-2xl mx-auto dark:text-gray-300">
      Dive into a world of knowledge with our expertly curated courses. From foundational concepts to advanced topics, there's always something new to learn.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">

      <!-- Course Card 1 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=1" alt="Course thumbnail - Web Development Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Web Development Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn the essentials of HTML, CSS, and JavaScript to build your first websites. Perfect for beginners!</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.8 (1,234 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 2 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=2" alt="Course thumbnail - Data Science Essentials" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Data Science Essentials</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Uncover the power of data analysis, statistics, and machine learning algorithms using Python.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.9 (987 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 3 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=3" alt="Course thumbnail - Mobile App Development" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Mobile App Development with React Native</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Build cross-platform mobile applications for iOS and Android using a single codebase.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.7 (765 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Emily White</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 4 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=4" alt="Course thumbnail - Digital Marketing Strategy" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Digital Marketing Strategy</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Master SEO, social media, content marketing, and paid advertising to boost online presence.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.6 (1,012 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">David Lee</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 5 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=5" alt="Course thumbnail - UI/UX Design Fundamentals" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">UI/UX Design Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Craft intuitive and beautiful user interfaces and experiences with design principles.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.9 (890 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Chris Green</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 6 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=6" alt="Course thumbnail - Cloud Computing Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cloud Computing Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Get started with cloud platforms like AWS, Azure, and Google Cloud, covering core services.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.7 (654 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Olivia Brown</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 7 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=7" alt="Course thumbnail - Cybersecurity Introduction" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cybersecurity Intro</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Understand common cyber threats and how to protect systems and data from attacks.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.5 (501 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/13.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Robert Hall</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 8 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=8" alt="Course thumbnail - Project Management Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Project Management PMBOK</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn agile methodologies, project planning, execution, and risk management.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-orange-500 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.8 (1,500 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/14.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Sophia Clark</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

    </div>
  </div>
</div>

관련 구성 요소

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

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

열다

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

Skeuomorphism 그리드 레이아웃 구성 요소에는 반응 형 효과와 어두운 테마 지원이 있습니다.

열다

그리드 레이아웃 구성 요소

레트로/빈티지 디자인의 반응형 그리드 레이아웃 구성 요소로, 향수를 불러일으키는 80년대/90년대 미학을 특징으로 합니다. 구성 요소에는 다크 모드를 지원하는 자리 표시자 이미지와 아바타가 포함되어 있습니다.

열다