JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<table>
  <tr>
  <th>Название</th>
  <th>Цвет</th>
  <th>Тверодость по Моосу</th>
  <th>Формула</th>
  </tr>
  <tr>
  <td>Алмаз</td>
  <td>Белый</td>
  <td>10</td>
  <td>C</td>
  </tr>
  <tr>
  <td>Рубин</td>
  <td>Красный</td>
  <td>9</td>
  <td>Al<sub>2</sub>O<sub>3</sub></td>
  </tr>
  <tr>
  <td>Аметист</td>
  <td>Голубой</td>
  <td>7</td>
  <td>SiO<sub>2</sub></td>
  </tr>
  <tr>
  <td>Изумруд</td>
  <td>Зеленый</td>
  <td>8</td>
  <td>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></td>
  </tr>
  <tr>
  <td>Сапфир</td>
  <td>Голубой</td>
  <td>9</td>
  <td>Al<sub>2</sub>O<sub>3</sub></td>
  </tr>
</table>
</body>
</html>

CSS

body {
  margin: 5px;
  padding: 0;
}

table {
  border-collapse: collapse;
  text-align: left;
}

th, td {
  border: 1px solid black;
  padding: 5px;
}

th {
  color: #fff;
  background-color: #666666;
}

td:nth-child(odd) {
    background: #7cded5;
}

td:nth-child(even) {
    background: #fffd7a;
}

td:nth-child(3) {
  text-align: center;
}