JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="alert alert-info">
			<button type="button" class="close" data-dismiss="alert">&times;</button>
			<br><br>
            <--- slide left border until mobile view
            <br><br>
					<div class="table-responsive">
						<table class="table">
							<thead>
								<tr>
									<th style="border:0;border-bottom:1px;border-right:1px;border-color: #3987ad;"></th>            <th style="border:1px solid #3987ad;">Mathématiques</th><th style="border:1px solid #3987ad;">Physique-Chimie</th>
								</tr>
							</thead>
							<tbody style="border: 1px solid #3987ad;">
								<tr>
									<td style="border-color: #3987ad;">T<sup>ale</sup> S</td><td style="border:1px solid #3987ad;"><div class="text-center"><i class="icon-ok icon-large text-green"></i></div></td><td style="border:1px solid #3987ad;"></td>
								</tr>
								<tr>
									<td style="border-color: #3987ad;">T<sup>ale</sup> ES</td><td style="border:1px solid #3987ad;"></td><td style="border:1px solid #3987ad;"></td>
								</tr>
								<tr>
									<td style="border-color: #3987ad;">1<sup>ère</sup> S</td><td style="border:1px solid #3987ad;"></td><td style="border:1px solid #3987ad;"></td>
								</tr>
								<tr>
									<td style="border-color: #3987ad;">1<sup>ère</sup> ES</td><td style="border:1px solid #3987ad;"></td><td style="border:1px solid #3987ad;"></td>
								</tr>
								<tr>
									<td style="border-color: #3987ad;">2<sup>nde</sup></td><td style="border:1px solid #3987ad;"><div class="text-center"><i class="icon-ok icon-large text-green"></i></div></td><td style="border:1px solid #3987ad;"></td>
								</tr>
								<tr>
									<td style="border-color: #3987ad;">3<sup>ème</sup></td><td style="border:1px solid #3987ad;"></td><td style="border:1px solid...