JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<div class="container-fluid" id="banner">

	<!--MAIN BUTTONS SECTION-->
	<div class="row button-container">
	    <button class="icon icon-me">
			<img class="img-responsive" src="img/PNG/256 px/cabin.png">
			    <div class="button-overlay">
				    <h1>Myself</h1>
			    </div>
		</button>
		<button class="icon icon-work">
			<img class="img-responsive" src="img/PNG/256 px/Wallet.png">
			    <div class="button-overlay">
				    <h1>Work</h1>
			    </div>
		</button>
		<button class="icon icon-goal">
		    <img class="img-responsive" src="img/PNG/256 px/Tent.png">
			    <div class="button-overlay">
				    <h1>Goal</h1>
			    </div>
		</button>
		<button class="icon icon-message">
			<img class="img-responsive" src="img/PNG/256 px/Pencil.png">
			    <div class="button-overlay">
				    <h1>Message</h1>
			    </div>
		</button>
	</div>
</div>

CSS

/*Button Banner*/
#banner{
	min-height:550px;
	height:auto;
}
#banner .button-container{
	width:auto;
	height:auto;
	text-align:center;
	padding:0;
}
#banner button.icon{
	position:relative;
	width:auto;
	height:auto;
	max-height:200px;
	max-width:200px;
	border:none;
	padding:10px;
	margin:2px 0px !important;
}