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

.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: 150px;  /* высота слоя */
	Display: block;
	border-radius: 8px; /* края округлёные */
	float: right; /* Обтекание */ 
	}
 /*==== reset style ====/////////////////////////////////////////////////////////////////////////////////////////////*/
table.table1
	{outline:3px solid #A64B00;
	outline-offset:1px;
  border-collapse: collapse; /* Отображать двойные линии как одинарные */
	width: 640px; /* ширина таблицы  */
	height: 930px; /* высота таблицы */
  }
table img
	{
	width: 200px; /* ширина слоя  */
  height: 150px;  /* высота слоя */
	Display: block;
  padding: 2px; /* Поля в ячейках */
	border-radius: 8px; /* края округлёные */
	float: right; /* Обтекание */ 
	}
  td, th
	{
  border: 3px solid #A64B00; /* Параметры границы */
  padding: 2px; /* Поля в ячейках */
  text-align: left; /* текст по центру */
  } 
/*==== tr1 ====*/
.t1r1
	{
	width: 640px; /* ширина таблицы  */
	height: 40px; /* высота таблицы */
  }
.t1r1h123 {}
/*==== tr2 ====*/
.t1r2
	{
	width: 640px; /* ширина таблицы  */
	height: 54px; /* высота таблицы */
  }
.t1r2d1 {}
.t1r2d2 {}
.t1r2d3 {}
/*==== tr3 ====*/
.t1r3
	{
	width: 640px; /* ширина таблицы  */
	height: 150px; /* высота таблицы */
  }
.t1r3h12
  {
  width:...