JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<div class="table">
    <div class="tr">
        <p class="td pub"><a href="#">pub</a>
        <div id="page" class="td">
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <p>page</p><p>page</p><p>page</p>
            <div id="news"><a href="#">Newsletter</a></div>
        </div>
        <p class="td pub"><a href="#">pub</a>
    </div>
</div>

CSS

.table
{
    display: table;
    width: 100%;
}
.tr
{
    display: table-row;
}
.td
{
    display: table-cell;
}
.pub a
{
    background-color: red;        
    display: block;
    height: 200px;
}
#page
{
    width: 600px;
    background-color: green;
}
#news
{
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: yellow;
}