JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<html>
<head>
<title>Games For Life</title>
<link rel="stylesheet" type="text/css" href="template.css"/>
</head>
<body>
<div id="body">
<!--Head-->
<div id="head"></div>
<div id="link"></div>
<!--/Head-->
<div id="flash"><img src="images/flash.jpg" border="0"/></div><h4 class="indi_name"><u>Инди-проекты:</u></h4>
<div id="indi">
<table class="indi_tabl" cellpadding="0" cellspacing="0" border="0">
         <tr>
         <td class="indi1">
         <span class="indi_name">
         <img src="images/indi.png" class="img" border="1"/>
                 <h4 class="indi_name"><u>Мега крутой заголовок</u></h4>
                 <p class="indi_content">А тут совсем немного текста, описание и прочее, ограничение по символам 3-4 строчки..</p>
         </span>
         </td>
         <td class="indi1">sdfg</td>
         <td class="indi1">sdfg</td>
         <td class="indi2">sdfg</td>
         </tr>
</table>
</div>
<div id="block">

         <!--/Проблемный блок-->

<div class="container">
         <table class="news" cellpadding="0" cellcpacing="0">
         <tr>
         <td>ololololololo</td>
         </tr>
         <tr>
         <td>ololololololo</td>
         </tr>
         </table>
</div>
<div class="container"><br><br><br>sdfgfdsfg</div>
<div>sdfgfdsfg</div>
<!--/Пробелмный блок-->
</div>


<div id="footer"></div>
</div>
</body>
</html>

CSS

body {
margin: 0 auto;
background-color: #424340;
}
#body {
margin: 0 auto;
width: 900px;
background-color: #fafafa;
border: 1px #bdbdbd solid;
-moz-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Для Firefox */
-webkit-box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Для Safari и Chrome */
box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.9); /* Параметры тени */
}
#head {
width: 100%;
height: 100px;
background-image: url('images/bg_head.png');
}
#link {
width: 100%;
height: 29px;
background-image: url('images/bg_link.png');
}
#flash {
width: 800px;
margin: 0 auto;
}
#indi {
width: 100%;
background-color: #fafafa;
border-top: 1px #bdbdbd solid;
border-bottom: 1px #bdbdbd solid;
}
.img {
margin-top: 5px;
margin-bottom: 0px;
}
.indi_content {
margin-top: 0px;
margin-left: 13px;
font-size: 13px;
}
.indi_name {
margin-left: 13px;
margin-top:0;
margin-bottom: 0px;
padding: 0px;
}
.indi1 {
width: 225px;
border-right: 1px #bdbdbd solid;
margin: 0 auto;
}

#block {
width: 100%;
}
.container {
width: 300px;
height: 400px;
}
.news {
width: 250px;
margin: 0 auto;
border-top: 1px #bdbdbd solid;
border-left: 1px #bdbdbd solid;
border-bottom: 1px #bdbdbd solid;
border-right: 1px #bdbdbd solid;
}

#footer {
width: 100%;
height: 100px;
background-image: url('images/bg_footer.png');
}