JSFiddle - React, Tailwind, and code Playground

by jamna

HTML

<div  id="header">
        <div id="buttons"> <a href="#" class="button_back">Back </a> 
            <a href="#" class="button_product">Products</a></div>
        <h1>Heading of the page</h1>
        <div id="logo"><a href="#"><img src="images/logo.png" width="178" height="31" alt="logo" /> </a></div>
</div>

CSS

#header { background:green; height:44px; }

#buttons { float: left; margin-top: 7px; }

#buttons a { display: block; font-size: 13px; font-weight: bold; height: 30px; text-decoration: none; width: 115px; text-shadow: 0 1px 1px #FFFFFF; color:#2a2a2a; }

#buttons a.button_back{ float: left; margin-left: 8px; padding-left: 46px; padding-top: 8px; }

#buttons a.button_product { float: left; background: url("../images/button_product_normal.png") no-repeat scroll 0 0 transparent; margin-left: -38px; padding-left: 23px; padding-top: 8px; }

#header h1 { color: #EEEEEE; font-size: 21px; font-weight: bold; padding-top: 9px; text-align: center;  }

#logo { float: right; margin-right: 15px;  }