JSFiddle - React, Tailwind, and code Playground

by pratikgk45

HTML

<body>
	<div class="container">
		<table class="list">
			<thead>
				<tr>
					<th class="ID">ID</th>
					<th class="name">Name</th>
					<th class="standings">Image</th>
				</tr>
			</thead>
			<tbody>
			            <tr>
							<td data-label="ID" style="font-weight: bold;">ID_1</td>
							<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
							<td data-label="Standings"><a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings"/></a></td>
			            </tr>
                  <tr>
							<td data-label="ID" style="font-weight: bold;">ID_1</td>
							<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
							<td data-label="Standings"><a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings"/></a></td>
			            </tr>
                  <tr>
							<td data-label="ID" style="font-weight: bold;">ID_1</td>
							<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
							<td data-label="Standings"><a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings"/></a></td>
			            </tr>
                  <tr>
							<td data-label="ID" style="font-weight: bold;">ID_1</td>
							<td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
							<td data-label="Standings"><a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings"/></a></td>
			           ...

CSS

.container {
	margin: 50px;
}

.container h1 {
	color: #2f4f6f;
}

.list {
	border: 1px solid #6c7ae0;
	width: 100%;
	margin-top: 20px;
	padding:0;
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: 0 0 70px #bbb, 0 0 30px #6c7ae0;
}

.list tr {
	border: 1px solid #ddd;
	padding: 5px;
}

.list tr:hover {
	background-color: #ddd;
}

.list th, .list td {
	padding: 10px;
	text-align: center;
}

.list td {
	color: #333;
}

.list tr td {
	font-size: 18px;
}

.list th {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 1px;
	background-color: #6c7ae0;
	color: white;
}

.list td a {
	color: #0000cd;
	text-decoration: none;
	font-weight: 600;
}

.list td a:hover {
	color: #191970;
	font-size: 20px;
	font-weight: bold;
}

.list td a img {
	transition: all .2s ease-in-out;
}

.list td a img:hover {
	transform: scale(1.5);
}

.list .ID {
	width: 200px;
}

.ID {
	font-weight: bold;
}

.list .standings {
	width: 200px;
}

.standings_logo img {
	width: 30px;
	height: 30px;
}