JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
<div class="h3setup">
    BACKGROUND IMG WILL REPLACE PURPLE
    <ul>
        <li><a href=""><h3 id="GI">General Information</h3></a></li>
        <li><a href=""><h3 id="BC">Benefits to Coding</h3></a></li>
        <li> <a href=""><h3 id="CT">Coding Types</h3></a></li>
</div>
<div>
    <img src="siteMapButton.png" id="siteMapButton"/>
</div>
    </div<!--end wrap-->

CSS

#wrap{
    width:100%;
    min-width:900px;
    margin:0 auto;
}
    .h3setup{
        text-align:center;
background:purple;
    height:200px;
width: 100%;
    color:white;
    }
.h3setup ul{
    text-align:center;
}   
.h3setup ul li{
    display:inline-block;
    padding:2px;
    border:1px solid white;
    border-radius:5px;
}
.h3setup ul li a{
    font-size:1em;
    
}