JSFiddle - React, Tailwind, and code Playground

by arun_etech

HTML

<html>
<head>
</head>
<body>
	
				<h3>heading : on hover heading box lines will join and will make a complete box</h3>
			
				<div class="title">
					<div class="A"></div>
					<div class="B">
						<div class="heading">WE'VE WORKED WITH</div>
					</div>
					<div class="C"></div>
					<div class="D"></div>
				</div>		
			
</body>
</html>

CSS

body {
	/*margin: 0 auto;*/
	text-align: center;
	width: 100%;
	margin-top: 100px;
	margin-left: 100px;
}


.title {
	height: 100px;
	width:500px;
	position: absolute;
}

.A{
	height: 80%;
	/*background-color: red;*/
	/*padding: 10px;*/
	border-left: 2px solid red;
	position: absolute;
	width:100%;
	transform: rotate(6deg);
	margin-top: 48px;
}

.B{
	height: 100%;
	/*background-color: blue;*/
	/*padding: 10px;*/
	border-top: 2px solid blue;
	position: absolute;
	width:90%;
	margin-left: 55px;
}

.C{
	height: 80%;
	/*background-color: green;*/
	/*padding: 10px;*/
	border-right: 2px solid green;
	transform: rotate(6deg);
	position: absolute;
	width:100%;
	margin-top: -26px;
}

.D{
	height: 100%;
	/*background-color: yellow;*/
	/*padding: 10px;*/
	border-bottom: 2px solid yellow;
	position: absolute;
	width:90%;
}

.heading {
	/*position: relative;*/
	/*margin-top: 100px;*/
	width: 400px;
	/*padding: 20px;*/
	/*border: 1px solid black;*/
	text-align: center;
	font-size:35px;
	font-weight: bold;
	/*border: 2px solid red;	*/
	margin-top: 30px;
	color: #00b698;

	
}

hr{
		width: 80%;
	}

.heading1 {
	/*margin-top: 100px;*/
	width: 400px;
	/*padding: 20px;*/
	/*border: 1px solid black;*/
	text-align: center;
	font-size:30px;
	font-weight: bold;
	border: 2px solid yellow;	
}