JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pageWrapper">

        <div id="topBar">
            <ul>
                <li><a href="#">+Tomasz</a></li>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Grafika</a></li>
            </ul>
        </div> <!-- end of topBar -->

        <div id="middleBar">
            <div id="centerBox">
                <img id="logoImage" alt="Google Logo" src="logo.png" width="269" height="95" />
                <input type="text" size="80" />
                <span id="countryName">Polska</span>
                <div id="centerBoxButtons">
                    <div class="button">Szukaj w Google</div>
                    <div class="button">Szczęśliwy traf</div>
                </div>
            </div> <!-- end of centerBox -->
        </div> <!-- end of middleBar -->

        <div id="bottomBar">
        </div> <!-- end of bottomBar -->

    </div>

CSS

html {
    background-color: #fff;
    padding: 0px;
    margin: 0px;
    height: 100%;
}

body {
    padding: 0px;
    margin: 0px;
}

#pageWrapper {
    font-family: Tahoma, Arial, sans-serif;
    color: rgb(64,64,64);
    font-size: 0.85em;
    margin: 0px;
    padding: 0px;
}

a:link, a:visited {
    text-decoration: none;
    color: rgb(64,64,64);
}

a:active, a:hover {
    text-decoration: underline;
    color: rgb(64,64,64);
}

#topBar {
    width: 100%;
    height: 60px;
    background-color: yellow;
    line-height: 60px;
    text-align: right;
    margin: 0px;
    padding: 0px;
}

#topBar ul {
    list-style-type: none;
    margin:0px;
}

#topBar ul li {
    display: inline;
    margin: 0px 10px 0px 0px;
}

#middleBar {
    width: 100%;
    /*border: solid 2px black; /*----------delete this later*/
}

#centerBox {
    margin-top: 125px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 200px;
    /*border: solid 2px red; /*--------------delete later*/
}

#centerBox img {
    width: 269px;
    height: 95px;
    margin: 0px 166px 0px 166px;
}

#centerBox input[type="text"] {
    margin: 20px 0 0 0;
    padding: 0;
    height: 25px;

}

#countryName {
    font-size: 1.2em;
    font-weight: bold;
    color: grey;
    position: relative;
    bottom: 75px;
    left: 380px;
}

#centerBoxButtons {
    width: 250px;
    /*border: solid 2px blue; /*--------------delete later*/
    margin-left: 175px;
}

.button {
    font-weight: bold;
    background-color: rgb(240,240,240);
    border: solid 1px rgb(150,150,150);
    padding: 6px;
    font-size: 0.78em;
    display: inline;
    margin-left: 15px;
    border-radius: 4px;
}

.button:active {
    position: relative;
    top: 1px;
    left: 1px;
}