JSFiddle - React, Tailwind, and code Playground

by roskoshinsky

HTML

<div class="wrap" >
    <div class="table" >
        <div class="row" style="height:50%;" >
            <div class="cell" >
                <div class="element" >
                    <div class="table" >
                        <div class="row" >
                            <div class="cell" style="border:1px dashed navy;" >
                                <a href="#" >Link 1</a>
                            </div>
                        </div>
                    </div>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="row" style="height:50%;" >
            <div class="cell" >
                <a href="#" >Link 2</a>
            </div>
        </div>
    </div>
</div>

<!--

-->

CSS

body{width:100%; height:100%; margin:0px; padding:0px;}
body * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

.wrap{display:block; position:absolute; width:100%; height:100%;}
.table{display:table; width:100%; height:100%;}
.row{display:table-row; width:100%; height:100%;}
.cell{display:table-cell; text-align:center; vertical-align:middle; width:100%;}

.element {display:block; position:relative; width:100%; height:100%;}
span {position:absolute; bottom:0px; right:0px; width:20px; height:20px; background:#ff00ff;}

/*
.cell{display:table-cell; position:relative; width:100%; border:1px dashed navy;}
.cell span {position:absolute; top:0px; left:0px; width:20px; height:20px; background:#ff00ff;}
*/