JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="block1">
    <div id="text">
      one
    </div>
  </div>
  <div class="block">
		<div id="text">
			two
		</div>

</div>
</body>

CSS

body,html {
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
  background-color: black;
}

#text {
	text-align: center;
	padding: 20px;
	color: #cfcaca;
}

.block1 {
	width: 200px;
	height: 200px;
	background: black;
	border: 2px solid #cfcaca;
	margin: 100px 100px;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	position: absolute;
	display: block;
	transition: 2s all ease-in-out;
}

.block1:hover {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	background: black;
	border: 2px solid #cfcaca;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	display: block;
	z-index: 100;
}

.block {
	width: 200px;
	height: 200px;
	background: black;
	border: 2px solid #cfcaca;
	margin: 100px 300px;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	transition: 2s all ease-in-out;
	position: absolute;
	display: block;
}

.block:hover {
	width: 300px;
	height: 300x;
	margin: 100 auto;
	background: black;
	border: 2px solid #cfcaca;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	display: block;
	z-index: 101;
}