JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<div class=" grid 6 cheese_people_l" id="cheese_people_l">
			<img id="cheese_people_l"src="img/cheese_expert.jpg">
	    	<p>Chief Cheese Taster <br/> Dave Le Conk</p>
	    	<p class="chesse_people">&ldquo;I've always had a passion for cheese. Now I get to taste it everyday! After nearly 20 years I'm still loving the job that I do. I can't actually see myself doing anything else.&rdquo;</p>
	    </div>

	    <div class=" grid 6 cheese_people_r" id="cheese_people_r">
			<img id="cheese_people_r" src="img/cheese_owner.jpg">
	    	<p>The Big Cheese Owner <br/>  Sally Fiffle</p>
	    	<p class="chesse_people">&ldquo;I wanted to create an online store that I'd would trust. This has been done by our amazing staff and the products they produce. Nothing can replace dedication and pasion.&rdquo;</p>
	    </div>

CSS

.cheese_people_l {
color: #524c43;
font-family: Arapey;
background-color: #ffffff;
border: 2px solid #524c43;
-webkit-border-radius: 0px 50px 50px 50px;
border-radius: 0px 50px 50px 0px;
width: 28vw;
line-height: 1.27;
text-align: left;
display:inline-block;

}

.cheese_people_r {
color: #524c43;
font-family: Arapey;
background-color: #ffffff;
border: 2px solid #524c43;
-webkit-border-radius: 50px 0px 0px 50px;
border-radius: 50px 0px 0px 50px;
width: 28vw;
line-height: 1.27;
text-align: right;
}

#cheese_people_l {
float:left;
margin: 1.3em 0.2em;
margin-left: 2px
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 0px 50px 50px 0px;
border-radius: 0px 50px 50px 0px;

}

#cheese_people_r {
float:right;
margin: 1.3em 0.2em;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 50px 0px 0px 50px;
border-radius: 50px 0px 0px 50px;


}