JSFiddle - React, Tailwind, and code Playground

by ooflorent

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<div data-role="page" id="home">
    <header data-role="header" data-position="fixed">
        <h1>Examens et notes</h1>
    </header>
    <div data-role="content" class="home">
        <p>Bienvenue Maurice Dupont,</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Animum autem reliquis rebus ita perfecit, ut corpus; Sed quid ages tandem, si utilitas ab amicitia, ut fit saepe, defecerit? Praeteritis, inquit, gaudeo. Duo Reges: constructio interrete. Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Ergo adhuc, quantum equidem intellego, causa non videtur fuisse mutandi nominis. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius.</p>
        <p>Remarque : les résultats sont visibles dès lors publication par les Scolarités.</p>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul data-role="navbar">
                <li><a href="#exams">Examens</a></li>
                <li><a href="#diplomas">Notes</a></li>
            </ul>
        </div>
    </div>
</div>

<div data-role="page" id="exams">
    <header data-role="header" data-position="fixed">
        <h1>Examens</h1>
    </header>
    <div data-role="content" class="exams">
        <div class="exam">
            <div class="dash"></div>
            <div class="info">
                <div class="container">
                    <span class="name">Bases de données distantes et sites dynamiques</span>
                    <span class="room">RON-206</span>
                    <span class="place">Ronzier</span>
                </div>
            </div>
    ...

CSS

.menu {
    text-align: center;
}

.dots {
    text-align: center;
    letter-spacing: 1px;
}

.dots .dot {
    font-size: 120%;
    color: rgba(187, 187, 187, 0.5);
}

.dots .dot:last-child {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 4px #fff;
}

.exams .exam:before,.exams .exam:after {
    content: "";
    display: table;
}

.exams .exam:after {
    clear: both;
}

.exams .exam {
    position: relative;
}

.exams .exam .dash {
    position: absolute;
    left: 50%;
    top: 4px;
    bottom: 0;
    border: 1px solid;
    margin-left: -1px;
}

.exams .exam .container {
    padding: 12px 12px 24px;
    border-top: 4px solid;
}

.exams .datetime .container {
    display: inline-block;
}

.exams .datetime .container span {
    opacity: 0.7;
}

.exams .exam .container span {
    display: block;
}

.exams .info {
    float: left;
    text-align: right;
    width: 50%;
}

.exams .name {
    font-weight: bold;
}

.exams .datetime {
    float: right;
    text-align: left;
    width: 50%;
}

.exams .exam:nth-child(2n) .info {
    float: right;
    text-align: left;
}

.exams .exam:nth-child(2n) .datetime {
    float: left;
    text-align: right;
}

.exams .date {
    font-size: 200%;
}

.steps .year span {
    display: block;
}

.steps .year span {
    display: inline-block;
}

.period .semester span {
    display: block;
}

.period .semester span {
    display: inline-block;
}

.period .semester .sess {
    padding: 0 0 0 5%;
    width: 40%;
}

.period .semester .note {
    padding: 0 5%;
    width: 40%;
    text-align: right;
}

.details span {
    display: block;
}

.ue .course span {
    display: inline-block;
}

.ue .course .sess {
    padding: 0 0 0 5%;
    width: 40%;
}

.ue .course .note {
    padding: 0 5%;
    width: 40%;
    text-align: right;
}