JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цитата</title>
<link rel="stylesheet" href="css/quads.css" type="text/css">
 </head>
 <body>
 	  <div>
    
    <p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content 
 	  </p>
    </div>
 </body>
</html>

CSS

* {
	padding: 0;
	margin: 0;
}

body {
  margin:100px;
  height: 100px;
  float: left;
  width: 290px
}

div:before,  div:after{
	display: block;
	background: black;
	margin-top: 5px;
 	height: 90px;
 	width: 5px;
 	content: "";
 	
}

div:before{
		margin-left: -5px;
    float: left;
}
div:after {margin-right: -5px;	
	float: right;}

p {
	background-color: green;
	width: 290px;
	float: left;
	color: white;
	padding-left: 40px;
	padding-right: 20px;
	min-height: 100px;
}