JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" align="center">
  <div id="header">
    <div id="logo">
    </div>
    <div class="menu">
    <nav>
      <ul>
        <li><a href="#"></a>test</li>
      </ul>
    </nav>
    </div>
  </div>
  <div class="clear1"></div>
  <div id="content">
    <div id="sideM"><br>
      <a href="#tracker" class="sideMenu1">tracker</a><br>
      <a href="#phone" class="sideMenu1">phone</a><br><br>
    </div>
    <div id="sideC">
      <div class="clear2"></div>
      <br><div id="sideBox">
        <div class="subject2">tracker</div>
        <a name="tracker" class="anchor"></a>
        <div class="clear1"></div>
        <div class="boxOne">
          <div class="boxTwoP"><img src="pic/website/200.png" alt=">>>>>>>>>>>>>>>>>"/></div>
          <div class="boxOneW">
            <a class="boxTwoWc">＞</a><br>
            <a class="boxTwoWs">topic</a><br><br>
            <a>◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------</a>
          </div>
          <div class="boxOneW">
            <br><br><br>
            <a>◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------</a>
          </div>
        </div>
        <div class="clear2"></div>
        <div class="boxTwoL">
          <div class="boxTwoP"><img src="pic/website/200.png" alt=">>>>>>>>>>>>>>>>>"/></div>
          <div class="boxTwoW">
            <a class="boxTwoWc">＞</a><br>
            <a class="boxTwoWs">topic</a><br><br>
            <a>◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------<br>
            ◆----------------</a>
          </div>
        </div>
        <div class="boxTwoR">
          <div...

CSS

@charset "utf-8";

.clear1{clear:both; height:10px; width:100%; background-color: #fff;}
.clear2{clear:both; height:25px; width:100%; background-color: #fff;}
img{border: 0;}
a{text-decoration: none;}
a:link {text-decoration: none;}

/*************************text*************************/
.subject1 {
	color: #996600;
	font-size: 27px;
	font-weight: bold;
	line-height: 2em;
}/*****home headline*****/

.subject2 {
	color: #000;
	font-size: 20px;
	background-color: #FFCC66;
	padding-top:5px;
	padding-bottom:5px;
}/*****headline*****/

.wordsB {
	word-wrap:break-word;
	overflow:hidden;
}/*****basic black*****/

.wordsW {
	color: #FFF;
	font-size: 14px;
	line-height:1.5em;
	padding-left:25px;
	text-align:left;
	word-wrap:break-word;
	overflow:hidden;
}/*****basic white*****/

.wordsYd {
	color: #CC9900;
	font-size: 14px;
	line-height:1.5em;
	text-align:left;
	word-wrap:break-word;
	overflow:hidden;
}/*****basic yellow dark*****/

.subjectYb {
	color: #FFCC00;
	font-size: 25px;
	line-height:1.5em;
	text-align:left;
	word-wrap:break-word;
	overflow:hidden;
}/*****black back yellow bright topic*****/

.name {
	float: left;
	width: 75%;
	text-align:left;
	word-wrap: break-word;
	overflow: hidden;
}/*****product name*****/

.price {
	color: #CB1009;
	float: right;
	width: 25%;
	text-align:right;
}/*****product price*****/

/*************************overall*************************/
.anchor{
    position:relative;
    top:-166px;
}

#wrapper {
	margin:auto;
	width: 1000px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position:relative;
}

#content {
	position:relative;
	top: 75px;
	margin-bottom: 120px;
	width:1000px;
	background-color: #fff;
}

#sideM {
	float: left;
	width: 145px;
	position: fixed;
	top: 108px;
	z-index: 10000;
	margin-top: 25px;
	background-color: #000;
}

#sideC {
	float: right;
	width: 80%;
	margin-right: 25px;
}

.sideMenu1 {
	color: #CC9900;
	font-size: 20px;
	line-height:...