JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="list-group">
<ul class="list type02">
  <li>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. </li>
  <li>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다.</li>
  <li>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다.</li>
  <li>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다.국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다.</li>
  <li>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다.</li>
  <li>국회의원의 선거구와 비례대표제 기타 선거에 관한 사항은 법률로 정한다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다.</li>
</ul>
<div class="foot"></div>
</div>

CSS

* {margin:0;padding:0;}
ul, li {list-style-type:none;}
.list-group {width:620px;}
.list {background:#000000;font-size:0;}
.list li {width:200px;margin-bottom:30px;margin-left:10px;background:#eeeeee;font-size:13px;}
.type02 li {display:inline-block;vertical-align:top;}
.type02 li:nth-child(3n+1) {margin-left:0;}
.foot {height:30px;margin-top:20px;background:#333333;}