JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="page">
<table class="table1">
  <tr class="t1r1">
    <th colspan="3" class="t1r1h123">
        <h1>Рубанок металлический малогабаритный с одиночным ножом.</h1>
    </th>
	</tr>
  <tr class="t1r2">
    <td class="t1r2d1"> 
      <b>Технические условия:</b>     ТУ-45-6453-345-65<br>
    </td>
    <td class="t1r2d2">
      <b>Артикул: dfg dgdfg</b><br>
      <b>Цена: 345 </b>
    </td>
    <td class="t1r2d3">
      <b>Дата: 00.00.0000</b><br>
      <b>Дата: 00.00.0000</b><br>
      <b>Дата: 00.00.0000</b>
    </td>
  </tr>
  <tr class="t1r3">
    <th colspan="2" class="t1r3h12">
      <b>Комплектация</b><br>
       1 - колодка; 2 - прижим; 3 - упор; 4 - рукоятка; 5 - винт; 6 - нож; 7 - ручка;<br>
    </th>
    <td class="t1r3d3">
     
      <img src="http://voskova.su/tool/joiner/photos/111.png" alt="123" >
    </td>
  </tr>
  <tr class="t1r4">
    <th colspan="3" class="t1r4h123">
      Инструмент предназначен для первичного строгания древесины различных пород
      при мелких столярных работах.<br><br>
      <b>Габаритные размеры =</b> 150 Х 40 Х 80 мм;<br>
      <b>Ширина ножа =</b> 30 мм;<br>
      <b>Масса =</b> 0,46 кг; <br>
      <b>Зазор</b> между передней гранью летки и лезвием ножа 2,0±0,5 мм;<br><br>
      <b>Материалы:</b>
      Колодку изготовляют из чугуна СЧ 12-28; 
      Прижим - из стали Ст 50Л-I или 45;
      Винты и упор - из автоматной стали А40Г;
      Нож - из стали У8А; Нож на длине 50 мм термически обрабатывается до твердости НRС 56...60;
      Рукоятка - из древесины (береза) или пластмассы.
      Деревянные рукоятку и ручку покрывают светлым нитролаком;
      Необработанные поверхности колодки очищают и покрывают нитроэмалью;
      Все металлические детали, кроме колодки, имеют защитно-декоративное гальваническое покрытие.<br>
      <b>Настройка:</b>
      Нож крепится винтом и прижимом.<br>
      <b>Примечание:</b>
      <br>
      <b>Изготовитель:</b> Сестрорецкий инструментальный завод им. Воскова.
    </th>
  </tr>
  <tr...

CSS

/*==== reset style ==== http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)/////*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, 
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{margin: 0; padding: 0; border: 0; font-size: 100%;	font: inherit;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse;border-spacing: 0;}
/*==== reset style ====/////////////////////////////////////////////////////////////////////////////////////////////*/
.characteristic, .page
	{
	margin: 0; /* отступы от края снаружи блока: верх, права, низ, лева */
	padding: 10px; /* отступы от края внутрь блока */
	width: 640px; /* ширина слоя  */
    height: 940px;  /* высота слоя */
	}
.characteristic b, .page b
	{
	font-weight: bold; /* изменяют жирность относительно насыщенности родителя |bold|lighter|normal|100|200|300|400|500|600|700|800|900 */
	color: #000000; /* цвет текста */
	}
.characteristic h1, .page h1
	{
	vertical-align: top; /* текст с верху */
	text-align: center; /* текст по центру */
	font-weight: bold; /* изменяют жирность относительно насыщенности родителя |bold|lighter|normal|100|200|300|400|500|600|700|800|900 */
	color: #000000; /* цвет текста */
	}
.characteristic img, .page img
	{
	width: 200px; /* ширина слоя  */
  height:...