JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div id = "tableWraper">
    <table cellspacing = "0" cellpadding = "2" border = "1">
  <tr class = "centerAlign">
    <td  colspan = "2" > Бумага </td>
    <td colspan = "19" align = "center"> Цена за штуку </td>    
  </tr>
  <tr class = "centerAlign">
    <td>Формат</td>
    <td>Плотность</td>
    <td colspan = "4" bgcolor = "yellow">от 1 до 10</td>
    <td colspan = "4" bgcolor = "yellow">от 10 до 50</td>
    <td colspan = "4" bgcolor = "yellow">от 50 до 100</td>
    <td colspan = "4" bgcolor = "yellow">более 100</td>
 <!--   <td colspan = "4" bgcolor = "yellow">от 200 до 500</td> -->
  </tr>
  <tr class = "centerAlign">
    <td colspan = "2" class = "bolder small">A4 (210x297 мм)</td>
    <td>1+0<sup><a class = "red" title = "Односторонняя черно-белая печать"><b>?</b></a></sup></td>
    <td>1+1</td>
    <td>4+0</td>
    <td>4+4</td>
    <td>1+0</td>
    <td>1+1</td>
    <td>4+0</td>
    <td>4+4</td>
    <td>1+0</td>
    <td>1+1</td>
    <td>4+0</td>
    <td>4+4</td>
    <td>1+0</td>
    <td>1+1</td>
    <td>4+0</td>
    <td>4+4</td>
 <!--   <td>1+0</td>
    <td>1+1</td>
    <td>4+0</td>
    <td>4+4</td> -->
  </tr>
  <tr>
    <td class = "centerAlign small">A4</td>
    <td class = "centerAlign small">90</td>
    <td class = "bggray">0.60</td>
    <td class = "bggray">1.15</td>
    <td class = "lgreen">2.35</td>
    <td class = "fgreen center">4.35</td>
    <td class = "bggray">0.55</td>
    <td class = "bggray">1.10</td>
    <td class = "lgreen">2.20</td>
    <td class = "fgreen center">4.10</td>
    <td class = "bggray">0.50</td>
    <td class = "bggray">1.00</td>
    <td class = "lgreen">2.00</td>
    <td class = "fgreen center">3.70</td>
    <td class = "bggray">0.45</td>
    <td class = "bggray">0.85</td>
    <td class = "lgreen">1.75</td>
    <td class = "fgreen center">3.25</td>
<!--    <td class = "bggray">0.40</td>
    <td class = "bggray">0.75</td>
    <td class = "lgreen">1.55</td>
    <td class = "fgreen center">2.85</td> -->
  </tr>
  <tr class =...

CSS

.logo{font-family:Courier;
    font-size:30px;
    } 
    
.name{font-size:20px;
    }
    
#wrapper{
    margin-top:20px;
    width:800px;
    font-family: Verdana, Geneva, sans-serif;
    margin-right: 15%;
    margin-bottom: 15%;
    margin-left: 15%;
        }

#map{margin:center;}

.gray{
    color:gray;
    text-align:center;
    font-family: Verdana, Geneva, sans-serif;
    }

table{
    width:800px;
    margin-top:10px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
}

.right{text-align:right;}

.center{text-align:center;}

/*#tableWraper{width:900px;}*/

.small{/*font-size:12px;*/}
    
.bolder{
   /* font-size: 12px;*/
    font-weight:500;
}
    
.bggray{background:#F3F3F3;}

.lgreen{background:#D9EAD3;}

.fgreen{background:#B6D7A8;}
    
.centerAlign{
    text-align:center;
    font-size: 12px;
}

.red{color:red;}

.brown{background:#FFF2CC;}
    
    
#wrapper #header {
}
#wrapper #header p {
    font-family: Verdana, Geneva, sans-serif;
}
#wrapper #header p #header a {
}