JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<div id="container">
		<div class='div1'>
			<div class="content">
				<div>
					<b class="title" >TOP</b>
					<p>It is easier to read and understand. A programmer reading the first example might wonder,.</p>


					<!--add  your changes after this-->
					<i>this is a paragar</i>
					
					<!--don't put anything after this-->						
				</div>
			</div>
		</div>
		<div class='div2'>
			<div class="content">
				<div>
					<b class="title">MIDDLE</b>
					<p>It is easier to read and understand. A programmer reading the first example might wonder, What does the number 52 mean here? Why 52? 	</p>
					
					<!--add  your changes after this-->
					
					<a href="#"> Hi </a>
					<!--don't put anything after this-->	
				</div>
			</DIV>
		</div>
		<div class='div3'>
			<div class="content">
				<div>
					<b class="title">BOTTOM</b>
					<p>It is easier to read and understand. Magic numbers become particularly confusing when the same number is used for different purposes in one section of code.	</p>

					<!--add  your changes after this-->
					<h6>this is h6</h6>
					
					<!--don't put anything after this-->					
				</div>
			</div>			
		</div>
	</div>

CSS

#container{
			display: block;
		}
		.div1{
			height: 300px;
			max-height: 100%;
			background-color: #36D7B7;
			display: inline-block;
			vertical-align: top;
		}
		.div2{
			height: 500px;
			max-height: 100%;
			background-color: #E9D460;
			display: inline-block;
			vertical-align: top;
		}
		.div3{
			height: 400px;
			max-height: 100%;
			background-color: #F64747;
			display: inline-block;
			vertical-align: top;
		}
		.content{
		  border: 1px solid black;
		  -moz-border-radius: 5px;
		  border-radius: 5px;
		  display: table;
		  height: 100%;
		  width: 250px;
		  margin: 0 auto;
		}
		
		.div1 > .content >div{
		  display: table-cell;
		  vertical-align: top;
		}
		.div2 > .content > div{
		  display: table-cell;
		  vertical-align: middle;
		}
		.div3 > .content >div{
		  display: table-cell;
		  vertical-align: bottom;
		}
		.title{
			font-size: 25px;
			text-align: center !important;
			margin: 0 auto !important;
			display: block;
		}