JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="center">
<a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>WELCOME CENTER</span></div>
<p>The Welcome Center is a one-stop shop for visiting the Yard, onboarding, and conducting NEN day-to-day NEN Program Operations.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>NEN DOCUMENTS</span></div>
<p>Authoritative NEN documents that have been signed by Leadership are managed.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>PROJECTS</span></div>
<p>Manage and stay informed of new and improved technologies in the NEN and NGEN pipelines.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>NEN CALENDAR</span></div>
<p>Stay informed of upcoming NEN events, milestones, and key meetings.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>NEN ALL HANDS</span></div>
<p>Access the May 30, 2015 All Hands Brief, or view the All Hands Archive. The next All Hands is scheduled for June 25, 2015.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>NEN NEWSLETTER</span></div>
<p>The weekly skimmer highlights Project X this week. Download a copy of the May 30th newsletter.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>HEALTH CHECK</span></div>
<p>View the latest dashboards for Service Level Management and Performance Management.</p></div></a><a href="https://www.google.com/" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>RISKS &amp; ISSUES</span></div>
<p>Manage and stay informed about NEN and NGEN risks and...

CSS

.ms-bodyareacell {
    background: rgb(245, 245, 243)
}
.center {
    margin-left: auto;
    margin-right: auto;
}
.ItemSection {
    margin-bottom: 10px;
    font-size: 2em;
    height: 28px;
    font-family:"Trebuchet MS", "sans-serif";
    width: 100%;
    background: url(http://techstatic.org/falconwood-pitch/front-page-titlebar.png) blue;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 2px;
    display: block;
    opacity: .95;
    box-shadow: 0px 0px 10px #aaa;
    text-shadow: 1px 1px 1px black;
    border-radius: 4px
}
.ItemBlock {
    font-size: 1.2em;
    border-top: #ccc 1px solid;
    border-right: #ccc 1px solid;
    width: 22.2%;
    vertical-align: middle;
    background: white;
    min-width: 180px;
    border-bottom: #ccc 1px solid;
    margin: 10px 1%;
    min-height: 180px;
    border-left: #ccc 1px solid;
    display: inline-block;
    opacity: .95;
    box-shadow: 0px 0px 10px #aaa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
.ItemBlock:hover {
    border-top: #75a0f0 1px solid;
    border-right: #75a0f0 1px solid;
    background: rgb(250, 250, 250);
    border-bottom: #75a0f0 1px solid;
    border-left: #75a0f0 1px solid;
    opacity: .99
}
.ItemBlock > .ItemTitle {
    height: 36px;
    background: url(http://techstatic.org/falconwood-pitch/front-page-titlebar.png) #3e628f;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}
.ItemBlock > DIV > SPAN {
    font-size: 1.6em;
    font-family:"Trebuchet MS", "sans-serif";
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 2px;
    display: block;
    text-shadow: 1px 1px 1px black
}
.ItemBlock > P {
    font-family:"kalinga", "sans-serif";
    font-weight: bold;
    color: black;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px
}
/*--------------------Captain's Priorities Tabs--------------------*/
#tabs-container {
    font-family: Arial,...