JSFiddle - React, Tailwind, and code Playground

by Naseer Khan

HTML

<div id="container">
    <div id="header">Kaboom!</div>
    <div id="footer">Kaboom!</div>
</div>

CSS

#header{
    
    background-color:orange;
    width:500px;
    height:20px;
    border:3px solid blue;
    border-left-style:none;
    border-right-style:none;
    list-style-type:none;
    border-top-style:none;
    text-align:center;
}
#footer{
    margin-top:455px;
    background-color:pink;
    width:500px;
    height:20px;
    border:3px solid blue;
    border-left-style:none;
    border-right-style:none;
    list-style-type:none;
    border-bottom-style:none;
    text-align:center;
}
#container
{
    margin:auto;
    background-color:#addadd;
    width:500px;
    height:500px;
    border:5px solid blue;
    border-radius:5px;
}