JSFiddle - React, Tailwind, and code Playground

by pichowskii

HTML

<table border="1" width="400">
		<thead>
			<tr>
				<th colspan="5"  style="text-align:center;">Web fundamentals exam results</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="5"  style="text-align:right;">Avarage score from 05 participants: 500</td>
			</tr>
		</tfoot>
		<tbody>
			<tr style="text-align:center;">
				<th>№</th>
				<th>First name</th>
				<th>Last name</th>
				<th>Score</th>
			</tr>
			<tr>
				<td>01</td>
				<td>Gosho</td>
				<td>Goshev</td>
				<td>500</td>
			</tr>
			<tr>
				<td>02</td>
				<td>Tosho</td>
				<td>Toshev</td>
				<td>500</td>
			</tr>
			<tr>
				<td>03</td>
				<td>Pesho</td>
				<td>Pesho</td>
				<td>500</td>
			</tr>
			<tr>
				<td>04</td>
				<td>Gencho</td>
				<td>Chenchev</td>
				<td>500</td>
			</tr>
			<tr>
				<td>05</td>
				<td>Draga</td>
				<td>Draganova</td>
				<td>500</td>
			</tr>
		</tbody>
	</table>

CSS

body {
	font-family: Calibri, "Helvetica Neue", Helvetica, sans-serif;
	color: #000;
	margin: 0;
}

table {
	text-align: left;
}

	table tr td {
		font-weight: normal;
	}

span.bold {
	font-weight: 700;
	display: block;
}

/*========
Nested Tables Homework
=======*/
table.nested-table {
	border-spacing: 3px;
}

table.nested-table, 
table.nested-table tr, 
table.nested-table td {
    border: 1px solid black;
}

table.nested-table td {
    padding: 15px;
}

table.nested-table {
    width: 380px;
}

	table.nested-table tbody tr td h1 {
		font-size: 5em;
		margin: 0;
	}

/*========
SoftUni Life Homework
=======*/
table.softuni-life tr th,
table.softuni-life tr td {
	padding: 20px;
	font-size: 25px;
	height: 61px;
}

table.nested {
	border-spacing: 3px;
}

table.nested, 
table.nested tr, 
table.nested td {
    border: 1px solid black;
}

/*========
SoftUni Life Homework
=======*/
table.softuni-life-btn tr th,
table.softuni-life-btn tr td {
	padding: 2px;
	min-height: 61px;
}

table.softuni-life-btn button {
	font-size: 30px;
	padding: 20px;
	width: 100%;
	color: blue;
}

table.softuni-life-btn button:hover {
	cursor: pointer;
}

table.softuni-life-btn tr td.beer button {
	vertical-align:middle; 
	text-align:right;
}