JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<table style="border: 2px inset black;margin: auto; background-image: url(images/white_lucky_rings.png);" width="1050px">
<tr width="100%">
<td><center><img src="http://www.cyberforum.ru/images/main.png" style="margin-left: 20px;"></center></td>
<td style="width: 400px;"><center><img src="http://www.cyberforum.ru/images/text.png" width="353px" height="41px"></center></td>
<td><center><img src="http://www.cyberforum.ru/images/123.png" style="height: 226px; width: 300px;"></center></td>
</tr>
</table>
<br>
<br>
<table style="border: 2px inset black;margin: auto;" width="1050px" height="1300px;">
<tr height="70px">
 
<td ><a href="#" class="knopka">Новости</a></td>
<td ><a href="#" class="knopka">Обучение</a></td>
<td ><a href="#" class="knopka">Оснащение</a></td>
<td ><a href="#" class="knopka">Преподаватели</a></td>
<td ><a href="#" class="knopka">Рекомендации</a></td>
<td ><a href="#" class="knopka">Документы</a></td>
<td><a href="#" class="knopka">Контакты</a></td>
</tr>
<tr style="background-image: url(#);">
<td colspan="7"></td>
</tr>
</table>

CSS

body {
  background: url(#);
}

a.knopka {
  color: #fff;
  /* цвет текста */
  text-decoration: none;
  /* убирать подчёркивание у ссылок */
  user-select: none;
  /* убирать выделение текста */
  background: rgb(212, 75, 56);
  /* фон кнопки */
  padding: .7em 1.5em;
  /* отступ от текста */
  outline: none;
  /* убирать контур в Mozilla */
}

a.knopka:hover {
  background: rgb(232, 95, 76);
}


/* при наведении курсора мышки */

a.knopka:active {
  background: rgb(152, 15, 0);
}

*{box-sizing:border-box}
table{border-collapse:collapse; border:2px solid #000}
tr:first-child{border:1px solid #000}