JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<header>Ici le header</header>
<div id="wrapper">
    <div class="colLeft">
        <div class="Menu-rubrique">
            <h3>Première rubrique</h3>
            <ul>
                <li>Rubrique 1</li>
                <li>Rubrique 2</li>
                <li>Rubrique 3</li>
                <li>Rubrique 4</li>
                <li>Rubrique 5</li>
                <li>Rubrique 6</li>
                <li>Rubrique 7</li>
                <li>Rubrique 8</li>
                <li>Rubrique 9</li>
            </ul>
        </div>
        <div class="Menu-rubrique">
            <h3>Seconde rubrique</h3>
            <ul>
                <li>Rubrique 1</li>
                <li>Rubrique 2</li>
                <li>Rubrique 3</li>
                <li>Rubrique 4</li>
                <li>Rubrique 5</li>
                <li>Rubrique 6</li>
                <li>Rubrique 7</li>
                <li>Rubrique 8</li>
                <li>Rubrique 9</li>
            </ul>
        </div>
    </div>
    <div class="colMiddle">
        <div id="liste_elements">
            <h1>ici du texte</h1>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue in quam porttitor, a sagittis sapien aliquet. Vestibulum leo purus, pulvinar aliquam elit non, ullamcorper fringilla justo. Sed ullamcorper interdum sodales. Quisque sed ipsum quam. Curabitur bibendum nibh dapibus tempor tristique. Aliquam a nisi non nulla varius congue in at neque. Curabitur pulvinar est sit amet vulputate posuere. Maecenas ac pharetra mauris, semper euismod justo. Cras vehicula, metus vitae interdum placerat, nisi neque volutpat mauris, id commodo dui enim nec lorem. Nullam eu volutpat eros, ac iaculis metus. Nulla quis orci nec turpis hendrerit lobortis a in nibh. Integer eget elementum urna, in blandit tellus. Ut quis aliquet ante, ac volutpat est. Aenean id dui gravida, consectetur sapien eu, accumsan tellus.
    
            <p>Sed molestie neque ac accumsan dictum. Praesent id interdum ex,...

CSS

header {
    background:grey;
    height:55px;    
}

#wrapper {
    display:inline-block;
    background:#eee;
    padding:1% 3%;
}

.colLeft {
    width: 20%;
    float: left;
    margin-right: 1%;
}

.colMiddle {
    width:56%;
    margin-right:1%;
    float:left;
}

.colRight {
    width:20%;
    float:left;
}
.Menu-rubrique, .infos
{
    background:#ddd;
    text-align:center;
}

.Menu-rubrique ul, .infos ul {
    list-style:none;
}

.Menu-rubrique ul li, .infos ul li {
    text-align:left;
}

#liste_elements
{
    float:left;
    width: 98%;
    text-decoration: none;
    background:#ccc;
    margin-right:2%;
    padding:1%;
}

footer {
    background:pink;
    height:45px;
}