JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<head>
  <title>DB</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="background">
    <div class="line1"></div>
	<div class="d"></div>
    <div class="line2"></div>
    <div class="line3"></div>
</div>
</body>

CSS

.background {
    background-color: #DEDEDE;
    width: 200px;
    height: 200px;
	position: relative;
}

.b {
    background-color: #DEDEDE;
    width: 100px;
    height: 100px;
}

.d {
    background-color: red;
    width: 200px;
    height: 2px;
    position: absolute;
	bottom:99px;
 	left: 0px;
}

.line1 {
    height: 200px;
    border-left: 5px solid black;
    position: absolute;
	left: 110px;
	top: 0px;
	transform-origin: -10px 100px;
	transition: transform 1s;
}

.background:hover > .line1 {
    transform: rotateY(180deg);
}

.line2 {
    width: 85px;
    border-top: 7px solid black;
    position: absolute;
    left: 115px;
	top: -17px;
	transform-origin: -15px 0px;
    transform: skewY(48.5deg);
	transition: transform 1s;
}

.background:hover > .line2 {
    transform: rotateY(180deg) skewY(48.5deg);
}

.line3 {
    width: 85px;
    border-bottom: 7px solid black;
    position: absolute;
    left: 115px;
	top: 210px;
 	transform-origin: -15px;
    transform: skewY(-48.5deg); 
	transition: transform 1s;
}

.background:hover > .line3 {
    transform: rotateY(180deg) skewY(-48.5deg) ;
}