JSFiddle - React, Tailwind, and code Playground

by kimiliini

HTML

<div id="wrap">
    <div id="head">
        <div id="logo">
            <a href="index.php">
                <img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" /></a>
        </div>
        <div id="menubar">MENU</div>
    </div>
    <div id="divider"></div>
    <div id="main_content">
        <div class="content_text">
            <p>
                <b>Chcete zaujmout nebo představit svůj produkt či služby neotřelým způsobem?</b>
                Nabízíme profesionální grafické práce – kompletní designové zpracování webu, navržení plakátů, vizitek, nálepek či internetových bannerů a různých dalších propagačních materiálů.
            </p><p>
                Můžeme Vám zařídit komplet webové stránky včetně <a id="i5e5c6b87208fa2519263adab8e5858d1" href="http://www.stable.cz/">hostingu</a>, <a id="w9e3b0bb96cef4fc3c9d71a5b540c43a8" href="http://www.domenovecentrum.cz/">domény</a>, designu a sepsání samostatného webu v jazyce php či html. Dále nabízíme web s redakčním systémem – Wordpress, Joomla nebo Dropal, které umožňují například snadné moderování <br />a užívání e-shopu.
            </p>
        </div>
    </div>
    <div id="footer">
        Copyright © 2004, EWITA s.r.o.
    </div>
</div>

CSS

* {
    margin     : 0;
    padding    : 0;
}
body {
    font-family: Arial;
    height     : 100%;
    background : orange;
}
img {
    border     : none;
}
/* ----------------------------------------------- */
#wrap {
    position   : relative;
    background : pink;
    width      : 100%;
    height     : 100%;
}
/* ----------------------------------------------- */
#head {
    position   : relative;
    width      : 800px;
    height     : 131px;
    margin     : 100px auto 0 auto;
    background : blue;
}
/* ----------------------------------------------- */
#logo {
    position   : relative;
    width      : 431px;
    float      : left;
    background : red ;
}

#logo_img {
    width      : 439px;
    height     : 131px;
    float      : left;
}
/* ----------------------------------------------- */
#menubar {
    position   : relative;
    background : #fff;
    width      : 300px;
    float      : left;
    margin-top : 107px;
    padding    : 3px 0 3px 10px;
}

/* ----------------------------------------------- */

#divider {
    border-top   : 5px solid #353535;
    border-bottom: 3px solid #888;
}

/* ----------------------------------------------- */

#main_content {
    position   : relative;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 2px solid #fff;
    padding    : 120px 0 130px 0;
}

.content_text {
    margin     : 0 auto;
    width      : 700px;
    background : #fff;
    border     : 1px solid;
    padding    : 50px 30px;

}
.content_text p {
    font-size  : 16px;
}

#footer {
    position   : relative;
    height     : 17px;
    width      : 100%;
    bottom     : 0;
    font-size  : 14px;
    text-align : center;
    padding    : 5px 0;
    background : url('http://cupido.g6.cz/pictures/background.png');
    border-top : 1px solid #888;
    border-bottom: 1px solid #ccc;
}