JSFiddle - React, Tailwind, and code Playground

by manish2535

HTML

<div class="outerwrapper">
   
    <div class="edge left"></div>
     <div class="edge top"></div>
    <div class="edge right"></div>
    <div class="edge bottom"></div>
    <div class="block">A</div>
</div>

CSS

* {
			margin: 0;
			padding: 0;
		}

		body{
			background: #2C3E50;
		}

		.outerwrapper{
			position: relative;
			margin: 50px 0 0 50px;
			overflow: hidden;
			height: 408px;
			width: 308px;
			display: inline-block;
			
		}

		.block{
			width: 300px;
			height: 400px;
			background: #fff;
			position: absolute;
			top: 4px;
			left: 4px;
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			-o-transition: all 0.5s;
			-ms-transition: all 0.5s;
			transition: all 0.5s;
			text-align: center;
			font-size: 300px;
			line-height: 400px;
			color: #2C3E50;
		}

		.block:hover{
			background: #2C3E50; 
			color: #fff;
		}

		.edge{
			background: #FFF;
			position: absolute;
			-webkit-transition: left 1s, right 1s, top 1s, bottom 1s;
			-moz-transition: left 1s, right 1s, top 1s, bottom 1s;
			-o-transition: left 1s, right 1s, top 1s, bottom 1s;
			-ms-transition: left 1s, right 1s, top 1s, bottom 1s;
			transition: left 1s, right 1s, top 1s, bottom 1s;
		}

		.edge.top{
			width: 921px;
			height: 1px;
			top: 0px;
			left: 0px;
			background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0,rgba(255,255,255,1) 310px,rgba(44,62,80,1) 310px,rgba(44,62,80,1) 615px,rgba(255,255,255,1) 615px,rgba(255,255,255,1) 921px); 
			background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0,rgba(255,255,255,1) 310px,rgba(44,62,80,1) 310px,rgba(44,62,80,1) 615px,rgba(255,255,255,1) 615px,rgba(255,255,255,1) 921px); 
			background: -o-linear-gradient(left,  rgba(255,255,255,1) 0,rgba(255,255,255,1) 310px,rgba(44,62,80,1) 310px,rgba(44,62,80,1) 615px,rgba(255,255,255,1) 615px,rgba(255,255,255,1) 921px); 
			background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0,rgba(255,255,255,1) 310px,rgba(44,62,80,1) 310px,rgba(44,62,80,1) 615px,rgba(255,255,255,1) 615px,rgba(255,255,255,1) 921px); 
			background: linear-gradient(left,  rgba(255,255,255,1) 0,rgba(255,255,255,1) 310px,rgba(44,62,80,1) 310px,rgba(44,62,80,1) 615px,rgba(255,255,255,1)...