JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="list-type">
  <li class="active"><a href="">치즈/참치/햄/식용유</a></li>
  <li><a href="">건강식품</a></li>
  <li><a href="">커피/차/꿀</a></li>
  <li><a href="">샴푸/화장품/바디용품</a></li>
  <li><a href="">양말</a></li>
  <li><a href="">사과/배/수입과일</a></li>
  <li><a href="">한우/수입육</a></li>
</ul>

<ul class="list-type">
  <li>치즈/참치/햄/식용유</li>
  <li class="active">건강식품</li>
  <li>커피/차/꿀</li>
  <li>샴푸/화장품/바디용품</li>
  <li>양말</li>
  <li>사과/배/수입과일</li>
  <li>한우/수입육</li>
  <li>건강식품</li>
</ul>

<ul class="list-type">
  <li>치즈/참치/햄/식용유</li>
  <li>건강식품</li>
  <li class="active">커피/차/꿀</li>
  <li>샴푸/화장품/바디용품</li>
  <li>양말</li>
  <li>사과/배/수입과일</li>
  <li>한우/수입육</li>
  <li>사과/배/수입과일</li>
  <li>건강식품</li>
</ul>

CSS

* {
  box-sizing: border-box;
}
.list-type {width:414px;
    position: relative;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(to right, #000000 0,#000000 1px,#000000 1px,#e4e4e4 1px,#e4e4e4 10px);
    background-repeat: repeat;
    background-size: 25% 100%;
    box-shadow: inset -2px 0 0 0 #e4e4e4, inset 2px 0 0 0 #e4e4e4;
}

.list-type > li {
  border-right: 1px solid transparent;
  border-bottom: 1px solid #000000;
  background-origin: padding-box;
  background-clip: padding-box;
  padding: 5px;
  box-sizing: border-box;
  flex: 0 0 25%;
  align-self: stretch;
  text-align: center;
}
.list-type > li.active {
  background-color: #e64551;
}
.list-type > li:nth-child(4n+4) {
  border-right-width: 0;
}
.list-type > li:nth-last-child(-n+4):nth-child(4n+1),
.list-type > li:nth-last-child(-n+4):nth-child(4n+1) ~ li {
  border-bottom-width: 0;
  display: inline-flex;
}