JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div id="container">
    <div id="itemContainer">
            <div id="tab">
                    <div id="tabContent">
                        Games
                    </div>
                </div>
        <div id="item">
            <div id="item1">
            </div>
        </div>
    </div>
    
</div>

CSS

#container
{
    
    
    
}

#itemContainer
{
    width:500px;
    height:200px;
      
}

#tab
{
    width:20%;
    height:25px;
    box-shadow:0px 0px 2px rgb(200,200,200);
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    align-content:center;
    text-align:center;
    padding-top:5px;
}
#item
{
    width:100%;
    height:75%;
    box-shadow:0px 0px 2px rgb(200,200,200) inset;  
    padding-top:20px;
}
#tabContent
{
    width:90%;
    height:90%;
    background-color:white;
    border-radius:4px;
    box-shadow:0px 0px 2px rgb(240,240,240);
    margin-left:auto;
    margin-right:auto;

   
}
#item1
{
    box-shadow:0px 0px 5px rgb(220,220,220);
    width:20%;
    height:80%;
    margin-left:20px;
   
}