JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<title>Untitled Document</title>
<style type="text/css">
#container {
	position: relative;
	width: 960px;
	height: 1200px;
	z-index: 1;
	border: thick solid #000;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 4px;
}
#header {
	position: relative;
	width: 960px;
	height: 146px;
	z-index: 2;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	border-bottom-style: solid;
	border-bottom-width: medium;
	border-bottom-color: #ac1c33;
	margin-right: auto;
	margin-left: auto;
	left: 0px;
	top: 0px;
	background-image: url(imges/html%20images/canstockphoto178167560_comp.jpg);
}
#tab {
	position: relative;
	width: 960px;
	height: 54px;
	z-index: 4;
	background-color: #57010c;
	border-bottom-width: thin;
	border-bottom-style: solid;
	text-align: left;
}
#apDiv3 {
	position: relative;
	width: 960px;
	height: 209px;
	z-index: 6;
	float: left;
	background-image: url(imges/html%20images/canstockphoto178167567_comp.jpg);
}
#apDiv1 {
	position: relative;
	width: 480px;
	height: 720px;
	z-index: 7;
	float: left;
	background-image: url(imges/html%20images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style1.jpg);
	direction: rtl;	
}
#apDiv4 {
	position: relative;
	width: 960px;
	height: 71px;
	z-index: 8;
	float: left;
	background-image: url(imges/html%20images/canstockphoto1781675600_comp.jpg);
}
#apDiv6 {
	position: relative;
	width: 77px;
	height: 714px;
	z-index: 9;
	float: left;
	border: medium double #640c1a;
	background-image: url(imges/html%20images/1646779_stock-photo-old-grunge-paper-background-with-vintage-victorian-style3.jpg);
}
#apDiv7 {
	position: relative;
	width: 395px;
	height: 720px;
	z-index: 10;
	float: left;
	background-image:...