JSFiddle - React, Tailwind, and code Playground

by Daffa Aditya

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Oswald&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
================================================================<br/>
Float Left<br/>
================================================================<br/>
<div class="btn1">Button</div><div class="btn1">Di kiri</div><div class="btn1">Berjejeran</div>
================================================================<br/>
Float Right<br/>
================================================================<br/>
<div class="btn2">Berjejeran</div><div class="btn2">Di kanan</div><div class="btn2">Button</div>
================================================================<br/>
Apabila Float left dan Float right digabungkan<br/>
================================================================<br/>
<div class="btn1">2 Button</div><div class="btn1">Di kiri</div><div class="btn2">Di kanan</div><div class="btn2">2 Button</div>

CSS

.btn1 {
    background:#1abc9c;
    width:auto;
    height:auto;
    border:2px solid #16a085;
    text-align:center;
    font-family:"oswald";
    color:#16a085;
    padding:10px;
    margin:5px;
    float:left;
}
.btn2 {
    background:#3498db;
    width:auto;
    height:auto;
    border:2px solid #2980b9;
    text-align:center;
    font-family:"oswald";
    color:#2980b9;
    padding:10px;
    margin:5px;
    float:right;
}