JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div id="SessionExpire">
    <div class="header">Session Expiring Soon</div>
    <div class="content">Hey there, your session is about to expire, you want to extend?</div>
    <div class="handle"><a href="" class="left">Please extend</a><a href="" class="right">Cancel</a></div>
</div>

CSS

#SessionExpire {border:2px solid red; width:100%; height:250px; position:relative;}

a {width: 100px; height: 50px; background-color:blue; color:#fff; text-decoration:none; text-align:center;line-height:40px;}
.left {float:left}
.right {float:right;}
#SessionExpire .header {background-color:red; height:30px}
#SessionExpire .content {padding:20px;}
#SessionExpire .handle {position:absolute; bottom:0px; width:90%; padding:20px; }