JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul class="items">
  <li class="item">Heriberto Nickel</li>
  <li class="item">Brittaney Haliburton</li>
  <li class="item">Maritza Winkler</li>
  <li class="item">Carmon Rigg</li>
  <li class="item">Alice Marmon</li>
  <li class="item">Lyman Steakley</li>
  <li class="item">Zenia Correa</li>
</ul>

CSS

ul, li {list-style-type:none;padding:0;margin:0;}
.items {
	display: flex;
	flex-wrap: wrap;
}
.items .item {
	flex: 1 0 50%;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}
.items .item:nth-child(odd) {
  background: #eeeeee;
}