JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<body>
        <div class='colonne_centrale'>
            <header>
                <div class="home">
                    <div class="logo">logo</div>
                </div>
                <div class="cont_infos_user">
                    <div class="b_connexion">
                        a
                    </div>
                </div>
            </header>
 
            <header>
                <div class="home">
                    <div class="logo">logo</div>
                </div>
                <div class="cont_infos_user">
                    <div class="b_connexion">
                        
                    </div>
                </div>
            </header>
         </div>
    </body>

CSS

body {margin: 0px 0px 0px 0px;
    height: 100%;}
  
.colonne_centrale{margin: auto;
    width: 75%;
    height: 100%;
    min-width: 800px;
    max-width: 1000px;}
  
header{font-size : 0;}
header .logo{display: inline-block;
    width: 20%;
    height: 150px;
    background-color: black;
    color: white;
    opacity: 0.5;}
header .home{display: inline-block;
    width: 80%;
    height: 150px;
    background-color: green;}
header .cont_infos_user{display: inline-block;
    width: 20%;
    height: 150px;
    background-color: black;
    color: white;
    margin:0;
}
header .b_connexion{background-color: orange;
    width: 91%;
    height: 80%;
    position: relative;
    top: 8%;
    left: 5%;
    text-align: center;
    margin:0;
}