JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>100 Soundscapes of Japan</title>
   
  </head>
  <body>
  <p><a name="top"></a></p>
  <div id="container">
    <div id="title"><h2>100 Soundscapes of Japan</h2></div>
    <div id="header">
		<p>
    In 1996, as part of its efforts to combat noise pollution and to protect and promote the environment, the Ministry of the Environment designated the 100 Soundscapes of Japan (日本の音風景100選).[1] There were 738 submissions received from all over the country and the 100 "best" were selected after examination by the Japan Soundscape Study Group.[1] These soundscapes are intended to function as symbols for local people and to promote the rediscovery of the sounds of everyday life.[1] The follow-up Sixth National Assembly on Soundscape Conservation was held in Matsuyama in 2002.[2]</div>    
		</p>
      <div id="date">
	    <p>01-Apr-2013 15:03 AM</p></div>
	    <a name="mh"></a>
      <div id="content">      
		<table width="100%" cellspacing="0" cellpadding="4" align="center" border>
			<tr>
				<td>Soundscape</td>
				<td>Category</td>
				<td>Location</td>
				<td>Prefecture</td>
				<td>Image</td>
				<td>Sound</td>
			</tr>
		</table>
	  	<div id="lnk">
		<p><a href="#top">on top!</a></p>
		</div>
      </div>	  
	<div id="footer" style="background-color:white"><a href="http://precizion.info">http://precizion.info</a></div>
  </div>
  </body>
</html>

CSS

body,html {
margin:0px; /*Ýòî õîðîøàÿ ïðàêòèêà îáíóëÿòü ïîëÿ è îòñóïû, ò.ê. ðàçëè÷íûå áðàóçåðû èõ ïî ðàçíîìó âîñïðèíèìàþò. */
padding:0px;
text-align:center;/*Âûðàâíèâàåì ìàêåò ïî öåíòðó â ñòàðûõ âåðñèÿõ áðàóçåðîâ */     
background-color: rgb(240,255,255);                                       
}

#container{
margin:auto 180;  /*âûðàâíèâàåì ìàêåò ïî öåíòðó â ñîâðåìåííûõ áðàóçåðàõ */
text-align:left;  /*Îòìåíÿåì tex-align:center çàäàííîå â Body. Äåëàåì ÷òîáû âåñü òåêñò â ìàêåòå âûðàâíèâàëñÿ ïî ëåâîìó êðàþ */
min-width:550px;  /*çàäàåì ìèíèìàëüíóþ øèðèíó ìàêåòà â ñîâðåìåííûõ áðàóçåðàõ */
width:expression(   /*çàäàåì ìèíèìàëüíóþ øèðèíó ìàêåòà â ñòàðûõ âåðñèÿ áðàóçåðà. Ïðîñòî çàìåíèòå öèôðó íà ñâîþ øèèðèíó :) */
(document.compatMode && document.compatMode == 'CSS1Compat')
?
(
document.documentElement.clientWidth < 550
?
"550px"
:
"auto"
)
:
(
document.body.clientWidth < 550
?
"550px"
:
"auto"
)
);
}
/*Çäåñü ïèøåì ñòèëè äëÿ øàïêè ñàéòà */
#title {
	margin: 0px;
 	padding:0px;
	border: thin rgb(0,0,0) solid;
	background-color:#FFF;
	text-align:center;
	
}
#header{
	padding: 10 10 10 10;
	background-color: rgb(240,255,255);
	text-align: left;
}
#menu{
}
#date{
	text-align: right;
}
#clear{
	padding: 20;
	float:none ;
}
#content{
	border: 1pt rgb(0,0,0);
	border-style:solid;
	padding: 10 10;
	text-align: left;
	background-color: #D7FFFF;
	overflow: auto;
}
#lnk {
}
#content p {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	letter-spacing:normal;
	text-align: left;
}
#footer{
	text-align: center;
	border: thin rgb(0,0,0) solid;
	margin:80px;

}
#nav_menu {padding: 0; width: 762px; margin: 0 auto}
#nav_menu ul {list-style: none; margin: 0; padding: 0}
#nav_menu li {display: inline}
#nav_menu a {
              float: left;
              width: 125px;
              height: 30px;
              background-color: #cc0033;
              border-left: 2px solid #ffffff;
              text-decoration: none;
              text-align: center;
              padding: 0;
     ...