JSFiddle - React, Tailwind, and code Playground

by sm1215

HTML

<div class="container">
	<ul>
		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
		<li>Etiam ullamcorper ut sapien id porttitor.</li>
		<li>Quisque eu ex efficitur, eleifend sem eu, rutrum sem.</li>
		<li>Morbi nec imperdiet augue. Integer et maximus dui.</li>
		<li>Maecenas venenatis tortor elit, at porta risus aliquam molestie.</li>
		<li>Nulla a nulla at nibh feugiat sollicitudin.</li>
		<li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
		<li>Mauris porta odio urna, et fermentum libero luctus ut.</li>
		<li>Nullam dapibus dui dui.</li>
		<li>Ut aliquet tempor facilisis. Sed arcu enim, pellentesque et lorem vitae, vestibulum tincidunt tortor.</li>
	</ul>
</div>

CSS

.container{
	width:465px;
	box-sizing:border-box;
	border:1px solid red;
}

li{
	width:45%;
	float:left;
	margin:10px 5% 10px 0;
	background-color:green;
	color:white;
}

li:nth-child(even){
	margin:10px 0 10px 5%;
	background-color:blue;
	color:white;
}

/*Clearfix*/
ul:before,
ul:after{
	content: ' ';
	display:table;
}

ul:after{
	clear:both;
}