JSFiddle - React, Tailwind, and code Playground

by danield770

HTML

<header class="header">
    	<img src="http://placehold.it/380x150">
        	<div class="container">
                <div class="coloredBG">	
                </div>
                <div class="coloredBG">
                </div>
                <div class="coloredBG">
                </div>
                <div class="coloredBG">
                </div>
           </div>
	</header>

CSS

body
{
    min-width: 775px;
    overflow:auto;
}
header img {
	border-right:solid #406d85 1px;
	padding-right:20px;
    float:left;
}
.container
{
    text-align: center;
    overlow:auto;
}
.header {
	max-width:1200px;
	min-width:200px;
	margin-top:30px;
}


.coloredBG {
	background: #406d85;
	height:100px;
	width:170px;
	display:inline-block;
	margin-left:3px;
	-webkit-transition: background 1s;
	-o-transition: background 1s;
	-moz-transition: background 1s;

}

.coloredBG:hover {
	 background: #103b51;
    -webkit-transition: background 2s;
	-o-transition: background 2s;
	-moz-transition: background 2s;
}