JSFiddle - React, Tailwind, and code Playground

by mirowin

HTML

<table>
    <tr>
        <td><img src="http://www.favor-group.ru/upload/cherepica/Polyester2.jpeg" style="float:right;"/>

<p><strong>Металлочерепица МП Монтеррей</strong> — металлочерепица классического варианта исполнения, которая активно используется для устройства кровли зданий различного назначения и реконструкции исторических строений. Особенность металлочерепицы Монтеррей заключается в геометрии профиля, который приближен к форме натуральной черепицы из глины.</p>

<h3>Технические характеристики:</h3>
<ul>
    <li>Высота профиля 25 + 14 мм</li> 
    <li>Шаг волны профиля 350 мм</li> 
    <li>Толщина металла 0.4 - 0.5 мм</li>
</ul>
<img src="http://www.metallprofil.ru/upload/medialibrary/4e5/4e5457ced1a68d36b15c41abe5292faa.jpg" style="float:left;"/>

<br/>
        </td>
    </tr>
    <tr>
        <td>
<form id="tab">
    <table>
        <tr>
            <div class="tab-cont">
                <td>
                    <div class="tab-nav">
                        <table class="tablechar">
                            <tr>
                                <td> <a href="#"><label for="tab1">Poliester / Полиестер</label></a>

                                </td>
                                <td>$99,99</td>
                            </tr>
                            <tr>
                                <td> <a href="#"><label for="tab2">Velur / Викинг</label></a>

                                </td>
                                <td>$99,99</td>
                            </tr>
                            <tr>
                                <td> <a href="#"><label for="tab3">Granite / Призма</label></a>

                                </td>
                                <td>$99,99</td>
                            </tr>
                            <tr>
                                <td> <a href="#"><label for="tab4">Solano / Пластизол</label></a>

                                </td>
                                <td>$99,99</td>
                 ...

CSS

@import url(http://fonts.googleapis.com/css?family=Bad+Script&subset=latin,cyrillic);

   @font-face {
    font-family: robotoMedium;
    src: url(/fonts/robotoMedium.ttf);
   }
      @font-face {
    font-family: robotoReg;
    src: url(/fonts/robotoReg.ttf);
   }
   @font-face {
    font-family: roboto;
    src: url(/fonts/roboto.ttf);
   }
   @import url(http://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic);

html {padding: 0;	margin: 0;}
body {font-family: robotoReg; padding: 0;	margin: 0;background-color:#DADFE1}
#content {width:100%; min-width:998px; //width:expression(document.body.clientWidth > 998? '100%' :'998px');}


#otstup {height: 15;}
#logo {width: 315; height: 119; background: url('../pic/logo.gif') no-repeat center top;}
#line { height: 139; width:6; background-color:#cc0000; }
#lineb {height: 46px; background-color:rgb(50, 167, 169); margin:0; border-left: 47px solid rgb(0, 117, 119);color:black;}
#kolaj {width: 546; height: 141; background: url('../pic/kolaj.gif') no-repeat center; float: right;}
#decor {width: 336; height: 144; background: url('../pic/decor.gif') no-repeat center;}
#poisk {width: 208; height: 73; background: url('../pic/poisk.gif') no-repeat center;}
#search { width: 206; height: 72; background-color: #cccccc;}

#slogan {height: 46px; background-color: #33ccff; margin:0; border-bottom: 4px solid #cc0000;}
#slogan h1 {font-size:16pt; font-weight: lighter; padding: 7 0 0 5; margin: 0;}
#start {padding: 0 13 0 0; border-right: 1px dashed #cecece;}
#start  h1{padding: 0; margin: 0; font-size: 13pt; font-weight: lighter;}

.slogan{
font-family: 'Bad Script', cursive;
 font-size:250%;
 letter-spacing: 5px;
 line-height: 80%;
 margin-top:-15px;
 text-align:center;
 -webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}

.menu {
font-size: 18pt; 
/* border-left: 1px solid #cccccc; 
border-right: 1px solid...