JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<nav class="holi-tab-wrap">
			<a href="#category0" class="active" title="현재선택">치즈/참치/햄/식용유</a>
			<a href="#category1">건강식품</a>
			<a href="#category2">커피/차/꿀</a>
			<a href="#category3">샴푸/화장품/바디용품</a>
			<a href="#category4">양말</a>
			<a href="#category5">사과/배/수입과일</a>
			<a href="#category6">한우/수입육</a>
			<a href="#category7">인삼/더덕/건버섯</a>
			<a href="#category8">굴비/옥돔/갈치/전복</a>
			<a href="#category9">황태/멸치/김/육포</a>
			<a href="#category10">곶감/견과</a>
			<a href="#category11">한과</a>
			<a href="#category12">생활용품</a>
			<a href="#category13">순금/주얼리/잡화</a>
			<a href="#category14">한복</a>
			<a href="#category15">가전 효도선물</a>
			<a href="#category16">시니어 용품</a>
      <a href="#category16">시니어 용품</a>
      <a href="#category8">굴비/옥돔/갈치/전복</a>
			<a href="#category9">황태/멸치/김/육포</a>
			<a href="#category10">곶감/견과</a>
			<a href="#category11">한과</a>
			<a href="#category12">생활용품</a>
		</nav>

CSS

.holi-tab-wrap {
  border: 1px solid #e4e4e4;
  box-shadow: inset 0 -1px 0 #e4e4e4;
  border-bottom-width: 0;
    overflow: hidden;
    text-align: center;
    margin: 35px auto 0;

    box-sizing: border-box;
    margin: 50px;
}
.holi-tab-wrap a {
  display: block;
  float: left;
  color: #333;
  border-right: 1px solid #e4e4e4;
  font-size: 17px;
  line-height: 62px;
  transition: background .2s;
  box-sizing: border-box;
  font-size: 12px;
  width: 20%;
  border-bottom: 1px solid #e4e4e4;
}
.holi-tab-wrap a:nth-of-type(5n) {
    border-right: 0;
}