JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cell">	
    <div class="up">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
	<div class="down">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
		<!-- <div class="line"></div> -->
		
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, soluta.</p>
		
    <div class="up-r">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    <div class="down-r">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>

CSS

.cell {
	position: relative;
	height: 80px;
	width: 250px;
	margin: 100px;
	border-radius: 6px;
	border: 2px solid orange;
	border-left: none;
    border-right: none;
}

p {
	margin: 10px;
}

.up {
	position: absolute;
	top: -1px;
	left: -25px;
	height: 39px;
	
	border-right: 2px solid orange;
	border-radius: 0 30% 0 0/0 100% 0 0;
	-webkit-transform: rotate(24deg);
}

.down {
	position: absolute;
	bottom: -1px;
	left: -25px;
	height: 39px;
	
	border-right: 2px solid orange;
	border-radius: 0 0 30% 0/0 0 100% 0;
	-webkit-transform: rotate(-24deg);
}

.up-r {
	position: absolute;
	top: -1px;
	right: -25px;
	height: 39px;
	
	border-right: 2px solid orange;
	border-radius: 0% 0% 30% 0/0% 0 100% 0;
	-webkit-transform: rotate(154deg);
}

.down-r {
	position: absolute;
	bottom: -1px;
	right: -25px;
	height: 39px;
	
	border-right: 2px solid orange;
	border-radius: 0% 30% 0 0/0% 100% 0 0;
	-webkit-transform: rotate(-154deg);
}