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

<div class="flex justify-center  m-[20px] gap-[10px] whitespace-nowrap">
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">진행중인 이벤트</button>
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">전체</button>
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">Big이벤</button>
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">기획전</button>
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">사전 혜택</button>
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">수강</button>
  <button class="hover:bg-black hover:text-white bg-[#f8f8f8] p-[10px] rounded-[25px]">매거진</button>
</div>

<!-- color 스포이드 -->
<input type="color">

@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";
}