JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<header>Models Point</header>
<div class="content">
    <div class="side">Whole Page</div>
    <div class="main">
        <div class="intro">Lorem ipsum dolor sit amet?</div>
        <div class="boxes three-col">
            <div class="col sec-img">Second Image</div>
            <div class="col">
                <div class="row small-msg-box">Small Message Box</div>
                <div class="row small-msg-box">Third Message Box</div>
            </div>
            <div class="col other">Other image box next to the message box</div>
        </div>
    </div>
</div>

CSS

* {font-family: Segoe UI; margin: 0; padding: 0;}
header {background: #000; color: #fff; padding: 5px;}
.content {overflow: hidden;}
.side {float: left; width: 20%; background: #fcc; height: 300px;}
.main {float: right; width: 80%;}
.three-col {overflow: hidden;}
.three-col .col {float: left; width: 33.333%;}
.small-msg-box {height: 100px; background: #080;}
.small-msg-box:first-child {background: #fcc;}
.intro {background: #ff0; height: 100px;}
.sec-img {background: #0ff; height: 200px;}
.other {background: #808; height: 200px;}