JSFiddle - React, Tailwind, and code Playground

HTML

<table>
		<tr>
			<th>No</th>
			<th>Nama Pria</th>
			<th>Nama Perempuan</th>
			<th>Jodoh atau Tidak Jodoh</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Andi</td>
			<td>Pradina</td>
			<td>Jodoh</td>
		</tr>		
		<tr>
			<td>2</td>
			<td>Rinto</td>
			<td>Raisa</td>
			<td>Tidak Jodoh</td>
		</tr>		
		<tr>
			<td>3</td>
			<td>Rendi</td>
			<td>Maya Silvia</td>
			<td>Jodoh</td>
		</tr>		
		<tr>
			<td>4</td>
			<td>Giman</td>
			<td>Novi</td>
			<td>Jodoh</td>
		</tr>		
		<tr>
			<td>5</td>
			<td>Om bewok</td>
			<td>Isyana</td>
			<td>Jodoh (sudah Pasti)</td>
		</tr>

	</table>

CSS

table {
			width: 100%;
			border:3px solid #fff;
			background: #3498db;
			text-align: center;
			padding:2%;
		}

		table:hover {
			background: #e74c3c;
			cursor: pointer;
		}

		th {
			border:3px solid #fff;
			padding:20px;
		}


		th:hover {
			background: #c0392b;
			color:#fff;
			cursor: pointer;
		}

		td {
			border:3px solid #fff;
			padding:2%;
		}

		td:hover {
			background: #c0392b;
			color:#fff;
			cursor: pointer;
		}