JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
#price1 {
    border: #d80 2px outset;
    background: #d80;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 4px;
    width:645px;

}
#price1 table { border-collapse: separate; border-spacing: 0; border: #d80 2px inset;     width:100%;
    height:231px; }
#price1 td { padding: 0; border: #d80 1px inset; background: #fff; }
#price1 p { margin: 0 3px; }

.стиль1 {font-size: 18px}
.стиль2 {font-size: 14px; }
.стиль4 {font-size: 12px; }
.стиль5 {font-size: 10px; font-weight: bold; }
.стиль6 {font-size: 12; }
-->
</style>
<!--[if lte IE 7]>
<style>
    #price1 table { border-collapse: collapse; }
</style>
<![endif]-->
</head>

<body>
<div id="price1">

<table>
  <tr>
    <td colspan="2"><p align="center" class="стиль1 стиль2">Лазерная и механическая гравировка</p></td>
  </tr>
  <tr>
    <td colspan="2"><p align="center" class="стиль4"> В таблице приведены цены на изделия, выполненные методом механической гравировки, а также расходные материалы для этих изделий</p></td>
  </tr>
  <tr>
    <td width="468"><p align="center" class="стиль5">Наименование изделия</p></td>
    <td width="146"><p align="center" class="стиль5">Цена, рубли</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center" class="стиль6">189,0</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center" class="стиль6">189,0</p></td>
  </tr>
  <tr>
    <td  class="стиль2"><p align="left" class="стиль6">Пломбир простой под свинец</p></td>
    <td class="стиль2"><p align="center"...