<script src="https://cdn.tailwindcss.com"></script>

<div class="container mx-auto">
  <ul class=" grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-[20px]">
    <li class="group"><a href="#">
        <img class="aspect-[376/221] object-cover" src="https://picsum.photos/id/237/752/442" alt="">
        <a href="#" class="flex flex-col mt-2  group-hover:underline">
          <div class="text-xs font-bold">이벤트</div>
          <div class="text-gray-500">게임업계에 관심 있다면?</div>
          <div class="text-[#2897fb]">상시 이벤트</div>
        </a>
      </a></li>
    <li class="group"><a href="#">
        <img class="aspect-[376/221] object-cover" src="https://picsum.photos/id/231/802/442" alt="">
        <a href="#" class="flex flex-col mt-2  group-hover:underline">
          <div class="text-xs font-bold">기타</div>
          <div class="text-gray-500">평생교육바우처로 무료 수강하기</div>
          <div class="text-[#2897fb]">상시 이벤트</div>
        </a>
      </a></li>
    <li class="group"><a href="#">
        <img class="aspect-[376/221] object-cover" src="https://picsum.photos/id/100/752/302" alt="">
        <a href="#" class="flex flex-col mt-2  group-hover:underline">
          <div class="text-xs font-bold">기타</div>
          <div class="text-gray-500">새로워질 K-디지털 기초역량훈련 오픈 알림 신청</div>
          <div class="text-[#2897fb]">상시 이벤트</div>
        </a>
      </a></li>
  </ul>
</div>
@font-face {
  font-family: "GmarketSansMedium";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

html > body {
  font-family: "GmarketSansMedium";
  text-underline-position: under;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.