JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div class="wrapper section" id="home_top" data-key="H">
    <div id="home">
        <div id="home_top_botm_bg">
            <div id="home_top_inn">
                <div id="home_top_logos">
                    <div id="site_title">
                        <a href="#">
                            <img src="http://www.w3schools.com/images/compatible_chrome.gif" alt="#" />
                        </a>
                    </div>
                    <p><a href="#">&nbsp;</a></p>
                    <div class="clr"></div>
                </div>
           </div>
            </div>
        </div>
    </div>

CSS

#home_top_logos {

    position:relative;
    padding-bottom:20px;
    padding-top:77px;
}
#home_top_logos img {
    position:absolute;
    width:40%;
    left:30%;
}
#home_top_logos a {
    display:block;
    margin:auto;
    margin-bottom:54px;
    padding: 25px 0px 20px 0;
}
#home_top_logos p {
    padding-bottom: 50px;
    margin:auto;
    height:75px;
    background:url('http://www.w3schools.com/images/compatible_c1hrome.gif') no-repeat top center;
}
#home_top_logos p a {
    width:366px;
    display:block;
    height:50px;
    line-height:50px;
    color:#616161;

text-align:center;