JSFiddle - React, Tailwind, and code Playground

HTML

<div class="backgrnd1231445">
	 <div id="mainwrapper">
	  
	  <TABLE width="100%">
        <TR>
                <TD width="50%" height="1000px">
				<div id="wrap1">
				  <div id="zagolovok1">
		           <h1>text</h1>
		          </div>
				  <div id="Screenbox">
		 <span class="img1"><a href="img/text.gif" rel="lightbox" title="text"><img src="img/text.gif" alt="text" title="text"></a></span>
		 <span class="img2"><a href="img/text.jpg" rel="lightbox" title="text"><img src="img/text.jpg" alt="text" title="text"></a></span>
		 <span class="img34"><a href="img/text.jpg" rel="lightbox" title="text"><img src="img/text.jpg" alt="text" title="text"></a></span>
		 <span class="img34"><a href="img/text.jpg" rel="lightbox" title="text"><img src="img/text.jpg" alt="text" title="text"></a></span>
		</div>
				<div id="knopka">
	 <a href="#"><button type="button" name="" value="" class="css3button">text</button></a>
		</div>
				<div id="socknopka">
				<script type="text/javascript">(function() {
 if (window.pluso && typeof window.pluso.start == "function") return;
 var d = document, s = d.createElement('script'), g = 'getElementsByTagName';
 s.type = 'text/javascript'; s.charset='UTF-8'; s.async = true;
 s.src = d.location.protocol  + '//share.pluso.ru/pluso-like.js';
 var h=d[g]('head')[0] || d[g]('body')[0];
 h.appendChild(s);
})();</script>
<div class="pluso" data-options="big,square,line,horizontal,nocounter,theme=04" data-services="vkontakte,odnoklassniki,facebook,twitter,google,moimir,email,print" data-background="transparent"></div>
</div>
<div id="liver">

</div>
<div id="pustodiv">
<p><span class="text2">text</span></p>
<ul>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
<li><span class="text2">text<span class="text1"> text</li>
</ul>

				</div>
				
				
				</TD>...

CSS

.backgrnd1231445{
  position: absolute;
  width: 100%;
  height: auto;
  background: url(/img/fon.jpg);
  background-repeat: repeat;
  background-attachment: scroll;
  }
#mainwrapper {
   position: relative;
   margin: 0 auto;
   margin-top: 30px;
   margin-bottom: 30px;   
   width: 80%;
   height: 80%;
   padding: 50px;
   -moz-border-radius: 4px;  
   -webkit-border-radius: 4px;
   background: #fff;
  }
 
  
#zagolovok1 {
   position: relative;
   text-align: center;
   margin-top: -53%;
   
   }
h1 {
  font-family: 'Cuprum', sans-serif;
  font-size: 25px;
  }

button.css3button {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#6b6b6b 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#6b6b6b),
		to(#000000));
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
}


#wrap1 {
  position: inheirt;
  width: 100%;
  
   }
#wrap2 {
  position: relative;
  width: 100%;
  }
#zagolovok2 {
  position: relative;
  margin-top: %;
  font-family: 'Cuprum', sans-serif;
  font-size: 25px;
  text-align: center;
  }
img {
 padding: 5px;
 }
ul {
  font-family: 'PT Sans', sans-serif;
  }
 .text1 {
 font-family: 'PT Sans', sans-serif;
 }
 .text2 {
 font-family: 'PT Sans Caption', sans-serif;
 }
#Screenbox {
  position: relative;
  
  }
#knopka {
  margin-top: 12%;
  margin-left: 31%;
  }
#socknopka {
  margin-top: 10%;
  margin-left: 10%;
  }