JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<div class="container w-4">
    <div class="row">
        <div class="tile bg-1"><p>Welcome</p></div>
        <div class="tile bg-4"><p>Games</p></div>
        <div class="tile bg-3"><p>Mail</p></div>
        <div class="tile bg-5"><p>Something</p></div>
    </div>
    <div class="row">
        <div class="col-1">
            <div class="tile bg-2"><p>GMail</p></div>
            <div class="tile bg-4"><p>Facebook</p></div>
        </div>
        <div class="tile tile-v2 bg-3"><p>Logs</p></div>
        <div class="tile tile-h2 bg-4"><p>StackOverflow</p></div>
        <div class="tile bg-5"><p>Crazy</p></div>
        <div class="tile bg-3"><p>Music</p></div>
    </div>
    <div class="row">
        <div class="tile tile-h2 bg-1"><p>Videos</p></div>
        <div class="tile tile-h2 bg-5"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
    </div>
</div>

CSS

body {font-family: 'Segoe UI', sans-serif; color: #fff; line-height: 1; font-size: 80%;}
p {padding: 5px; margin: 0;}
.row {overflow: hidden;}
.container {margin: -10px 0 0 -10px; overflow: hidden;}
.tile {margin: 10px 0 0 10px; width: 100px; height: 100px; float: left; cursor: pointer;}
.tile-h2 {width: 210px;}
.tile-v2 {height: 210px;}
.bg-1 {background-color: Green;}
.bg-2 {background-color: Brown;}
.bg-3 {background-color: Red;}
.bg-4 {background-color: Teal;}
.bg-5 {background-color: Purple;}
.w-4 {width: 480px;}
.col-1 {float: left; width: 110px;}
.col-2 {float: left; width: 220px;}