JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
</div>

CSS

body {
	line-height: 1;
}

/* THIS IS MY CODE*/

.box {
	margin:0 auto;
	width:100%;
	max-width:750px;
	height:53.33vw;
	max-height:400px;
}

ul.list {
	padding: 0;
	width:100%;
	height:100%;
	background:green;
	list-style-type:none;
	text-align:center;
	font-size:3vw;
}

ul li:nth-child(odd) {
	height:8%;
	width:interit;
	padding-top:2%;
	background:grey;
}

ul li:nth-child(even) {
	height:8%;
	width:interit;
	padding-top:2%;
	background:red;
}