JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="container">
		<div class="item item-4">
		Flex Item
		<p>Vertical and horizontal align easy!</p>
		</div>
		<div class="item item-5"></div>
	</div>

CSS

.container{
	padding:10px;
	background: #fff;
	border-radius:5px;
	margin: 45px auto;
	box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}

.item{
	color: #fff;
	padding: 15px;
	margin: 5px;
	background: #3db5da;
	border-radius: 3px;
}

.container{
	display: flex;
	min-height: 50vh;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}
.item{
	/*margin: auto;*/
	/*align-self: flex-start;*/
}

.item-4{
	/*align-self: flex-start;*/
}