JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div id="header">ici mon header</div>
<div id="contener">
    <div id="colonne1">Contenu de gauche</div>
    <div id="colonne2">Contenu central</div>
    <div id="colonne3">Contenu de droite</div>
</div>
<div id="foot">
ici mon footer
</div>

CSS

body {
    margin:0;
}
#header {
    height:45px;
    background-color:#cccccc;
    left:0;
    right:0;
    text-align:center;
}

/* ma div conteneur que je centre */

#contener {
    width:950px;
    margin:5px auto 5px;
}

/* Mes cadres intérieurs */

#colonne1 {
    display:inline-block;
    width:250px;
    background:red;
}
#colonne2 {
    display:inline-block;
    width:250px;
    background:red;
}
#colonne3 {
    display:inline-block;
    width:250px;
    background:red;
}

/* et enfin mon footer */

#foot {
    left:0;
    right:0;
    text-align:center;
    background-color:#cccccc;    
}