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>
	        <h4>row(.content1)</h4>
	    </div>
	    <div class="content">
	        <div id="content2">
	            <div id="box1" style="background-color:red;">A</div>
	            <div id="box1" style="background-color:lightblue;">B</div>
	            <div id="box1" style="background-color:yellow;">C</div>
	        </div>
	        <h4>row-reverse(.content2)</h4>
	    </div>
	    <div class="content">
	        <div id="content3">
	            <div id="box1" style="background-color:red;">A</div>
	            <div id="box1" style="background-color:lightblue;">B</div>
	            <div id="box1" style="background-color:yellow;">C</div>
	        </div>
	        <h4>column(.content3)</h4>
	    </div>
	    <div class="content">
	        <div id="content4">
	            <div id="box1" style="background-color:red;">A</div>
	            <div id="box1" style="background-color:lightblue;">B</div>
	            <div id="box1" style="background-color:yellow;">C</div>
	        </div>
	        <h4>column-reverse(.content4)</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;
		}
		#content2 {
		  width: 200px;
		  height: 200px;
		  border: 1px solid #c3c3c3;
		  display: -webkit-flex;
		  -webkit-flex-direction: row-reverse;
		  display: flex;
		  flex-direction: row-reverse;
		}
		#content3 {
		  width: 200px;
		  height: 200px;
		  border: 1px solid #c3c3c3;
		  display: -webkit-flex;
		  -webkit-flex-direction: column;
		  display: flex;
		  flex-direction: column;
		}
		#content4 {
		  width: 200px;
		  height: 200px;
		  border: 1px solid #c3c3c3;
		  display: -webkit-flex;
		  -webkit-flex-direction: column-reverse;
		  display: flex;
		  flex-direction: column-reverse;
		}
		.content{
			text-align: center;
		}
		#box {
		  width: 50px;
		  height: 50px;
		}


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