JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<link href='https://fonts.googleapis.com/css?family=Roboto:100,400,300,500,700' rel='stylesheet' type='text/css'>

<div align="left" class="fond">
  <div >

    <div class="style_prevu_kit" style="background-color:#cb2025;"><h1>IF</h1>
		<div>
		{Due Date}
		</div></div>
    <div class="style_prevu_kit" style="background-color:#f8b334;"></div>
    <div class="style_prevu_kit" style="background-color:#97bf0d;"></div>
    <div class="style_prevu_kit" style="background-color:#00a096;"></div>
    <div class="style_prevu_kit" style="background-color:#93a6a8;"></div>


    <div style=" padding:5px; color:#b5e6e3; font-weight:300; font-size:30px; font-family:'Roboto';padding-top:20px;" class="btn btn-link btn-block">New IFFTY
    </div>


  </div>
</div>

CSS

body {
  font-family: Roboto;
  background-color: #00506b;
  height: 100%;
}
h1, h2, h3,h4,h5 {
	color:#fff;
	text-align:center;
	margin-bottom:0px;
}

h1 {
font-weight:700;
}


.fond {
  position: absolute;
  padding-top: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(31,32,35,.9);
  height: 100%;
	display:inline-block;
	width:250px;
}

.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 48%;
  height: 100px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
}

.style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}