JSFiddle - React, Tailwind, and code Playground

by jay_zou

HTML

<div class="wrap">
	    <div class="content">
	        <div id="content1">
	            <div id="box" style="background-color:red;">A</div>
	            <div id="box" style="background-color:lightblue;">B</div>
	            <div id="box" style="background-color:yellow;">C</div>
	            <div id="box" style="background-color:#1B8057;">d</div>
	            <div id="box" style="background-color:#E67676;">e</div>
	        </div>
	        <h4>nowrap(.content1)</h4>
	    </div>
	    <div class="content">
	        <div id="content2">
	            <div id="box" style="background-color:red;">A</div>
	            <div id="box" style="background-color:lightblue;">B</div>
	            <div id="box" style="background-color:yellow;">C</div>
	            <div id="box" style="background-color:#1B8057;">d</div>
	            <div id="box" style="background-color:#E67676;">e</div>
	        </div>
	        <h4>wrap(.content2)</h4>
	    </div>
	    <div class="content">
	        <div id="content3">
	            <div id="box" style="background-color:red;">A</div>
	            <div id="box" style="background-color:lightblue;">B</div>
	            <div id="box" style="background-color:yellow;">C</div>
	            <div id="box" style="background-color:#1B8057;">d</div>
	            <div id="box" style="background-color:#E67676;">e</div>
	        </div>
	        <h4>wrap-reverse(.content3)</h4>
	    </div>
	</div>

CSS

.wrap{
		  	display: -webkit-flex;
			display: flex;
		}
		#content1 {
		  width: 200px;
		  height: 200px;
		  border: 1px solid #c3c3c3;
		  display: -webkit-flex;
		  display: flex;
		  -webkit-flex-direction: row;
		  flex-direction: row;
		  flex-wrap: nowrap;
		  -webkit-flex-wrap: nowrap;
		}
		#content2 {
		  width: 200px;
		  height: 200px;
		  border: 1px solid #c3c3c3;
		  display: -webkit-flex;
		  -webkit-flex-direction: row;
		  display: flex;
		  flex-direction: row;
		  flex-wrap: wrap;
		  -webkit-flex-wrap: wrap;
		}
		#content3 {
		  width: 200px;
		  height: 200px;
		  border: 1px solid #c3c3c3;
		  display: -webkit-flex;
		  -webkit-flex-direction: row;
		  display: flex;
		  flex-direction: row;
		  flex-wrap: wrap-reverse;
		  -webkit-flex-wrap: wrap-reverse;
		}
		.content{
			text-align: center;
		}
		#box {
		  width: 50px;
		  height: 50px;
		}


		#box1 {
		  width: 50px;
		  height: 50px;
		}