JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<div class="container">
    <img class="logo" src="https://www.google.co.il/images/srpr/logo11w.png" alt="Google" class="to-left"/>
    <div class="red-box">
        I'm a red box
    </div>
    <ul class="links">
        <li class="links-item"><a href="#">link</a></li>
        <li class="links-item"><a href="#">link</a></li>
        <li class="links-item"><a href="#">link</a></li>
        <li class="links-item"><a href="#">link</a></li>
        <li class="links-item"><a href="#">link</a></li>
    </ul>
    <!--<div class="clearfix"></div>-->
</div>

CSS

.container {
  width: 800px;
  background: gray;
}

.logo {
    width: 200px;
    height: 67px;
    float: left;
}

.red-box {
    width: 156px;
    height: 205px;
    background: #ff0000;
    float: right;
}

.links {
    list-style: none;
}

.links-item {
    width: 104px;
    height: 37px;
    background: #1200ff;
    display: inline-block;
    margin: 6px 5px;   
}

.links-item a {
    color: white;
}

.clearfix {
    clear: both;
}