JSFiddle - React, Tailwind, and code Playground

by nndd

HTML

<div id="header">Logo / elementy menu poziomego
    <div id="brain">tekst</div>
    <div id="nose">nosek</div>
</div>
<div id="container"> 
    <div id="menuleft">
        <!-- <?php include "menuleft.php"; ?> -->
        <p class="ml">element menu 1</p>
        <p class="ml">element menu 2</p>
        <p class="ml">element menu 3</p>
    </div>
        <div id="center">
        <!-- <?php include ... ?> -->To jest blok z treścią - powinien on się dostosowywać do rozdzielczości ekranu</div> 
  <div id="adR">Banner pionowy 160*600px
    </div>

</div>

CSS

#header {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #AFF;
    width: 80%;
    height: 50px;
}
#brain {
    height: 15px;
    display: inline-block;
}
#nose {
    display: inline-block;
}
#container {
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    
}
#menuleft {
    display: inline-block;
    border: 1px dotted #444;
    vertical-align: top;
    min-width: 80px;
    width: 15%;
    min-height: 150px;
}
.ml {
    background-color: #9AF;
}
#center {
    display: inline-block;
    background-color: #CCF;
    width: 45%;
    min-height: 150px;
    vertical-align: top;
    text-align: left;
}
#adR {
    display: inline-block;
    background-color: #AAA;
    min-width: 60px;
    width: 15%;
    min-height: 150px;
    vertical-align: top;
}