테일윈드

https://nerdcave.com/tailwind-cheat-sheet

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

<div class="flex m-[20px] gap-[10px]">
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">진행중인 이벤트</button>
  <button class="hover:bg-black bg-black p-[8px_15px_5px_15px] rounded-[25px] text-white hover:text-white">전체</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">Big이벤트</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">기획전</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">사전 혜택</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">수강</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">매거진</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">당첨자</button>
  <button class="hover:bg-black bg-[#F8F8F8] p-[8px_15px_5px_15px] rounded-[25px] hover:text-white">기타</button>
</div>

이미지 비율

img 비율
width:
height:
object-fit: cover; // 짤리더라도 이미지 비율 유지