JSFiddle - React, Tailwind, and code Playground

by openwab

HTML

<table>
    <tr>
        <th></th>
        <th>Terrain 1</th>
        <th>Terrain 2</th>
        <th>Terrain 3</th>
    </tr>
    <tr>
        <td>10h00</td>
        <td id="terrain_1_10h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
        <td id="terrain_2_10h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
        <td id="terrain_3_10h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
    </tr>
    <tr>
        <td>11h00</td>
        <td id="terrain_1_11h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
        <td id="terrain_2_11h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
        <td id="terrain_3_11h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
    </tr>
    <tr>
        <td>12h00</td>
        <td id="terrain_1_12h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
        <td id="terrain_2_12h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
        <td id="terrain_3_12h"><a class="reserv_it" href="#reserver" title="Réserver le terrain">Réserver</a>
        </td>
    </tr>
</table>
<div id="popup" class="popup_block">
	<h2>Reservation</h2>
	<p>Choisissez un jouer : </p>
    <select name="joueurs" class="sel_player">
        <option value="id_joueur_1">jean</option>
        <option value="id_joueur_2">Marc</option>
        <option value="id_joueur_3">Pierre</option>
    </select>
</div>

CSS

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
background: white;
width: 480px;
border-collapse: collapse;
text-align: left;
margin: 20px;
}

.popup_block{
	display: none; /*--masqué par défaut--*/
	background: #fff;
	padding: 20px;
	border: 20px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	/*--Les différentes définitions de Box Shadow en CSS3--*/
	-webkit-box-shadow: 0px 0px 20px #000;
	-moz-box-shadow: 0px 0px 20px #000;
	box-shadow: 0px 0px 20px #000;
	/*--Coins arrondis en CSS3--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

JavaScript

$(".reserv_it" ).click(function(){
    $('#popup').fadeIn(); 
    return false;
});