JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
	<style>
		body#entity{
			background-color: grey;
			font-family: Arial;
		}
		header#logo img{
			display: block;
			margin: auto auto 10px;
			width: 90%;
		}
		
		section#first{
			background-color: grey;
		}
			
		article#beef{
			background-color: white;
			margin-right: 5%;
			margin-left: 5%;
			border-style: groove;
			
		}
		
		header#product{
			margin-left: 40%;
			margin-right: 18%;
			background-color: red;
			font-size: 30px;	
			position: relative;
			margin-top: 7px;
		}
		
		article#beef p{
			margin-left: 35%;
			background-color: red;
			position: absolute;
			margin-top: 50px;
			margin-right: 10%;
			font-size: 20px;
		}
		
	
		#beef aside img {
			width: 35%;
			height: auto;
			margin-left: 2%;
			margin-top: 1%;
			border-style: inset;
			border-width; 10px;
		}
		
		div#subpics{
			display: block-inline;
			margin: 50px 90px auto 90px;
		    text-align: center;
			word-spacing: 10px;
		}
		

		div#capt figure {
			display: inline-block;
			width: 150px;
			margin-bottom: 100px;
			vertical-align: top;

			
		}
		
		div#capt figure img{
			width: 200px;
			height: auto;
			border-style: groove;
			background-color: red;
		}
		
		
		/******************************* END OF PRODUCT AREA ******************/
		
		article#potatos{
			margin-top: 5%;
			margin-right: 5%;
			margin-left: 5%;
		}
		
		div#shipandpay{
			display: block;
			background-color: white;
			border-style: groove;
			margin-right: 10px;
			float: left;
			width:49%;
			height: 453px;
		}
		
		div#about{
			background-color: red;
			border-style: groove;
			float: right;
			width:49%;
			height: 218px;
			
		}
		
		
		
		div#question{
			background-color: white;
			float: right;
			border-style: groove;
			width: 49%;
			height: 210px;
			margin-top: 20px;
		}
		
		div#shiptitle{
			background-color: lightgrey;
			position: absolute;
			margin: -19px auto auto 20px;
			border-style: groove;
			font-size:...