JSFiddle - React, Tailwind, and code Playground

by rajeevRF

HTML

<body data-gr-c-s-loaded="true"><div class="container">
	<div class="item block1">
		<a href="https://hangouts.google.com/webchat/start"><div class="call">
			
		</div></a>
	</div>
  <div class="item block2">
	<a href="https://cdpn.io/Refath/debug/dyoPmow/YvAgOeRgYVOA">
		<div class="info">
			
		</div>
	</a>
  </div>
  <div class="item block3">
	<a href="https://cdpn.io/Refath/debug/VwLYBjR/mVMbGDRgQKgr"><div class="item block3">
		<div class="rehab">
			
		</div>
	</div></a>
  </div>
  <div class="item block4">
	<a href="https://cdpn.io/Refath/debug/mdJyOpa/PNAvYKZKoNpr"><div class="item block4">
		<div class="CPR">
			
		</div>
	</div></a>
</div>
</body>

CSS

.container{
	display: grid;
	grid-gap: 20px;
	height: 97vh;
  width: 97vw;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas: 
		"blockOne blockTwo"
		"blockThree blockFour"

}

.item{
	background-color: whitesmoke;
	border: 0px solid black;
	box-shadow: 5px 5px;
  position:relative;
  padding:50px 0px;
}

.block1{
	grid-area: blockOne;
}

.block2{
	grid-area: blockTwo;
}

.block3{
	grid-area: blockThree;
}

.block4{
	grid-area: blockFour;
}

.item:hover{
	background-color: lightblue;
	transition: ease 0.3s; 
}

*{
	transition: ease 0.3s; 
}

.call{
	background-color: black;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
  top: 50%;
	box-shadow: 5px 5px;
	background-image: url("https://www.levelaccess.com/wp-content/uploads/2017/11/CVAA-02.png");
	background-position: center;
	background-size: 230px;
transition: 0.70s ease;
}

.call:hover{
	transition: 0.70s ease;
	background-color: whitesmoke;
}

.info{
	background-image: white;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
	top: 50%;
	box-shadow: 5px 5px;
	background-image: url("https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/5851494071557740370-512.png");
	background-size: cover;
	background-position: center;
	background-size: 100px;
	text-align: center;
	  display: flex;
  justify-content: center;
  align-items: center;
}

.info:hover{
	background-size: 300px;
}

.rehab{
	background-color: red;
	width: 250px;
	height: 250px;
	border-radius: 150px;
	margin: 0 auto;
  top: 50%;
	box-shadow: 5px 5px;
	background-image:...