JSFiddle - React, Tailwind, and code Playground

by corto

HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="calendar.css" />
        <link rel="icon" type="image/ico" href="images/favicon.ico" />
    </head>
    <body lang="fr">
        <table class="calendar">
                <tr class="days">
                    <th></th>
                    <th><h1>LU</h1></th>
                    <th><h1>MA</h1></th>
                    <th><h1>ME</h1></th>
                    <th><h1>JE</h1></th>
                    <th><h1>VE</h1></th>
                    <th><h1>SA</h1></th>
                    <th><h1>DI</h1></th>
                </tr>
                <tr>
                    <td class="weeks"><h1>S1</h1></td>
                    <td><a href="#buro"><p>Le mot du bureau</p></a></td>
                    <td></td>
                    <td><a href="#cine"><p>L'instant cin&eacute;</p></a></td>
                    <td><a href="#dance"><p>Dancin' on Air</p></a></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class="weeks"><h1>S2</h1></td>
                    <td></td>
                    <td><a href="#portraits"><p>Portrait dauphinois</p></a></td>
                    <td><a href="#sports"><p>Sports' Do</p></a></td>
                    <td><a href="#dance"><p>Dancin' on Air</p></a></td>
                    <td></td>
                    <td></td>
                    <td><a href="#musicale"><p>Musicale</p></a></td>
                </tr>
                <tr>
                    <td class="weeks"><h1>S3</h1></td>
                    <td></td>
                    <td></td>
                    <td><a href="#mode"><p>Mod' auphine</p></a></td>
                    <td><a href="#dance"><p>Dancin' on Air</p></a></td>
                    <td><a href="#doigts"><p>D&icirc;tes le avec les doigts</p></a></td>
         ...

CSS

*{
    font-family: Palatino, Helvetica;
    list-style-type: none;
    padding: 0;
    margin: 0;
    cell-spacing: 0;
    color: black;
    text-decoration: none;
}

table.calendar{
    width: 970px;
    height: 600px;
    margin: 40px auto;
    margin: 40px auto;
}

table.calendar td a{
    background-image: -moz-linear-gradient(center bottom, #6397DF 11%, #04224B 56%);  
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.11, #04224B), color-stop(0.56, #6397DF));
    position: relative;  
    top: 0;  
    box-shadow: 0 0 20px #A9C0DF inset, 0 0 2px #FFB273;  
    transition: all 0.3s ease-in;  
}

table.calendar td a:hover{
    -moz-transform: scale(1.2);
    z-index: 10;
    box-shadow: 0 0 20px #A9C0DF inset, 0 0 15px #FFB273; 
} 

table.calendar h1,
table.calendar a p{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    font-size: 14px;
    font-weight: normal;
    color: #FFB273;
    vertical-align: middle;
    display: inline-block;
}

table.calendar a p{
    line-height: 1.2;
}

table.calendar h1{
    line-height: 50px;
    background: #04224B;
    border-radius: 50% 50%;
}

table.calendar a{
    display: block;
    width: 100%;
    height: 100%;
    line-height: 110px;
    -moz-transition-property: font-size;
    -moz-transition-duration: 0.5s;
}

table.calendar tr td,
table.calendar tr th{
    text-align: center;
    vertical-align: middle;
    width: 121px;
    height: 120px;
}