JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_content_slider_wrapper" style="max-width: 803.5px; min-height: 909px;">
  <div class="content_slider_wrapper" id="slider1" style="width: 803.5px; height: 974px;">
<div class="circle_slider_text_wrapper" style="width: 781.5px; left: 0px; display: inline-block;" id="sw10">
<div class="content_slider_text_block_wrap">
<div class="name_container">
	<div class="sub_head">
		<h1 class="h1_candidates">
			<span class="sidestar-left">&#9733;</span> Ceyl Prinster <span class="sidestar-right">&#9733;</span>
		</h1>
		<div class="sub_head_text">President &amp; CEO&nbsp;&nbsp;&bull;&nbsp;&nbsp;Colorado Enterprise Fund&nbsp;&nbsp;&bull;&nbsp;&nbsp;Denver, CO</div>
	</div>
</div>
</div>
</div>
</div>
</div>

CSS

div.main_content_slider_wrapper {
	overflow: hidden;
	margin: 0 auto;
	max-width: 1000px;
}
.content_slider_wrapper {
	font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
	font-size: .8em; 
	line-height:20px;
	text-align: center; 
	color:#484848;
	margin:0; padding:0; 
	border:none;
	clear: both;
	display: block;
	position: relative;
	height: auto !important;
	min-height: 400px;
}

.content_slider_wrapper .circle_slider {
	position:relative;
	width:970px;
	height:260px;
	margin:0;
	padding:0;
	border:none;
	overflow: hidden;
}
.circle_slider_text_wrapper {
	width:100%;
	left:0px;
	top:10px;
	position:relative;
	display:inline-block;
	
}
.content_slider_text_block_wrap {
	margin: 0 auto 3.5em;
	padding: 1em 1.5em;
	position: relative;
	top: 3.5em;
	background-color: #F2E6DC;
	font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
	font-size: 1.2em;
	border: .1em solid #D7C994;
	-moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -khtml-border-radius: 1em;
    border-radius: 1em;
}
div.name_container {
    	text-align: center;
    	margin: 0 auto;
    }
    .sub_head {
    	display: inline-block;
    	padding: 0 1em .3em;
    	position: relative;
    	margin: 0 auto;
    	top: -50px;
    	text-align: center;
    	background-color: #212D3B;
    	font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    	font-size: 1.6em;
    	color: #f2efe9;
    	-moz-border-radius: .5em;
        -webkit-border-radius: .5em;
        -khtml-border-radius: .5em;
        border-radius: .5em;
    	text-transform: uppercase;
    }
    .sub_head_text {
    	text-align: center;
    	text-transform: uppercase;
    	font-size: .8em;
    	margin: -0.5em;
    	padding-bottom: .5em;
    	position: relative;
    	white-space: nowrap;
    }
    .h1_candidates {
    	white-space: nowrap;
    	top: -20px;
    }
    h1 {
    	font-family: "MissionGothic-Regular",...