JSFiddle - React, Tailwind, and code Playground

by ti2005

HTML

<div class="flex flex-col items-center justify-center w-screen min-h-screen bg-gray-900 py-10">
	<!-- Component Start -->
	<h1 class="text-lg text-gray-400 font-medium">2020 IPL Season - Table</h1>
	<div class="flex flex-col mt-6">
		<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
			<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
				<div class="shadow overflow-hidden sm:rounded-lg">
					<table class="min-w-full text-sm text-gray-400">
						<thead class="bg-gray-800 text-xs uppercase font-medium">
							<tr>
								<th></th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									Club
								</th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									MP
								</th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									W
								</th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									L
								</th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									NRR
								</th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									Pts
								</th>
								<th scope="col" class="px-6 py-3 text-left tracking-wider">
									Last 5
								</th>
							</tr>
						</thead>
						<tbody class="bg-gray-800">
							<tr class="bg-black bg-opacity-20">
								<td class="pl-4">
									1
								</td>
								<td class="flex px-6 py-4 whitespace-nowrap">
									<img class="w-5" src="https://ssl.gstatic.com/onebox/media/sports/logos/JTre94vh6WJeLmIL-Dfc1g_48x48.png" alt="">
										<span class="ml-2 font-medium">MI</span>
									</td>
									<td class="px-6 py-4 whitespace-nowrap">
									14
								</td>
									<td class="px-6 py-4 whitespace-nowrap">
									9
								</td>
									<td class="px-6 py-4 whitespace-nowrap">
									5
								</td>
									<td class="px-6 py-4 whitespace-nowrap">
									+1.107
								</td>
									<td class="px-6 py-4...