JSFiddle - React, Tailwind, and code Playground

by jay_zou

HTML

<div class="wrap">
    <div class="container">
        <div class="content flex-start">
            <div class="box" style="background-color:red;">A</div>
            <div class="box" style="background-color:lightblue;">B</div>
            <div class="box" style="background-color:yellow;">C</div>
        </div>
        <h2 class="text">flex-start</h2>
    </div>
    <div class="container">
        <div class="content flex-end">
            <div class="box" style="background-color:red;">A</div>
            <div class="box" style="background-color:lightblue;">B</div>
            <div class="box" style="background-color:yellow;">C</div>
        </div>
        <h2 class="text">flex-end</h2>
    </div>
    <div class="container">
        <div class="content center">
            <div class="box" style="background-color:red;">A</div>
            <div class="box" style="background-color:lightblue;">B</div>
            <div class="box" style="background-color:yellow;">C</div>
        </div>
        <h2 class="text">center</h2>
    </div>
    <div class="container">
        <div class="content space-between">
            <div class="box" style="background-color:red;">A</div>
            <div class="box" style="background-color:lightblue;">B</div>
            <div class="box" style="background-color:yellow;">C</div>
        </div>
        <h2 class="text">space-between</h2>
    </div>
    <div class="container">
        <div class="content space-around">
            <div class="box" style="background-color:red;">A</div>
            <div class="box" style="background-color:lightblue;">B</div>
            <div class="box" style="background-color:yellow;">C</div>
        </div>
        <h2 class="text">space-around</h2>
    </div>
</div>

CSS

.wrap{
		  	display: -webkit-flex;
			display: flex;
			-webkit-flex-flow: column wrap;
			flex-flow: column wrap;
		}
		.text{
			text-align: center;
		}
		.content{
			height: 200px;
		  	display: -webkit-flex;
			display: flex;
			-webkit-flex-flow: row wrap;
			flex-flow: row wrap;
		}
		.flex-start{
			justify-content: flex-start;
		}
		.flex-end{
			justify-content: flex-end;
		}
		.center{
			justify-content: center;
		}
		.space-between{
			justify-content: space-between;
		}
		.space-around{
			justify-content: space-around;
		}
		.box{
		  width: 50px;
		  height: 50px;
		}
		.container{
			border: 1px solid #263849;
			margin-bottom: 20px;
		}