JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	
</head>
<body>
	<div class="center">
		<div class="block">
			123
		</div>
	</div>
</body>
</html>

CSS

.center{
			width: 80%;
			margin: 0 auto;
		}

		.block{
			width: 100px;
			height: 100px;
			border-color: blue;
			box-shadow: inset 0 0 0 2px blue;
			border: 0;
			transition: color 1s;
			/*animation: left_to_right 0.5s ease-in-out infinite alternate;*/	
		}

		.block:hover{
			border-color: red;
		}

		.block::before{
			top: 0;
    		left: 0;
    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block::after{
			bottom: 0;
    		right: 0;

    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block:hover::before{
			border-top-color: red;
			border-right-color: red;
			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
			width: 100%;
			height: 100%;
		}

	
		.block:hover::after{
			border-bottom-color: red;
			border-left-color: red;
			transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
			width: 100%;
			height: 100%;
		}

		

		/*@keyframes left_to_right{
			0%{
				border-top: 8px solid red;
				transform: translate(15px);
			}
			100%{border-top: 8px solid black;}
		}*/