JSFiddle - React, Tailwind, and code Playground

by Lysander

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
    
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <link href='style.css' rel='stylesheet' type='text/css' />
    </head>
    <div>głupia reklama</div>
    <div id='baner'>jakiś dziwny obrazek</div>
    <div id='menu'>
        <ul>
            <li>gjhdfjkghjfg</li>
            <li>|</li>
            <li>djskhfsjkd</li>
        </ul>
    </div>
    <div id='strona'>
        <div id='struktura'>jakies dane<br/>sdfhkdfksjhfsjkdfhsdhkfsldhfskljlkhfsjk<br/>sdfsdfsd<br/>dsfhdsjhfk<br/><br/>
        </div>
        <div id='duzy'>
            <div id='nbs'>tekst</div>
            <div id='maly'>tekst malego diva</div>
            <div id='maly'>tekst malego diva</div>
        </div>
        <hr class='clear' /> <!-- <- dodane -->
    </div>
    <div id='stopka'>Stworzone przez kt1117</div>

</html>

CSS

div {
    position:relative;
    height:auto;
    //text-align:center;
}
#baner {
    height:60px;
    position:relative;
    text-align:left;
}
#menu {
    height:auto;
    position:relative;
    background: red;
    text-align:center;
}
#menu ul {
    height:7px;
    margin-top:2px;
    //text-align: center;
    text-align:justify;
    list-style: none;
    display:inline-block;
}
#menu li {
    display: inline;
}
#strona {
    min-height:20px;
    display:block;
    text-align:left;
    background:black;
}
#strona #struktura {
    position:relative;
    display:inline-block;
    width:20%;
    height:100%;
    background:#ABAEC7;
    float:left;
}
#strona #duzy {
    position:relative;
    display:inline-block;
    background:blue;
    text-align:left;
    width:80%;
    float:right;
    height:100%;
}
#strona #duzy #maly {
    display:inline-block;
    background:blue;
    width:50%;
    float:left;
    height:50%;
}
#strona #duzy #nbs {
    display:block;
    background:green;
    height:50%;
}
#stopka {
    display:block;
    background:brown;
    float:left;
    text-align:center;
    width:100%;
}

hr.clear {
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
    border: 0;
}