JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="list-type">
  <li class="active">치즈/참치/햄/식용유</li>
  <li>건강식품</li>
  <li>커피/차/꿀</li>
  <li>샴푸/화장품/바디용품</li>
  <li>양말</li>
  <li>사과/배/수입과일</li>
  <li>한우/수입육</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:;
    position: relative;
    margin: 20px;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
    background: linear-gradient(to right, #000000 0%,#000000 1%,#000000 1%,#e4e4e4 1%,#e4e4e4 99%);
    background-repeat: repeat;
    background-size: 33% 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;
  width: 100px;
  /* padding: 20px; */
  padding-left: 0.5%;
  box-sizing: border-box;
  flex: 0 0 33%;
  align-self: stretch;
  text-align: center;
}
.list-type > li.active {
  background-color: #e64551;
}
.list-type > li:nth-child(3n+1) {
  margin-left: 0;
}
.list-type > li:nth-child(3n+3) {
  flex-basis: 34%;
}
.list-type > li:nth-last-child(-n+3):nth-child(3n+1),
.list-type > li:nth-last-child(-n+3):nth-child(3n+1) ~ li {
  border-bottom-width: 0;
  display: inline-flex;
}