JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="thirdbanner">
        <div class="thirdL">
            <p><u>Remote Attendance</u></p>
            <ul>
                <li>Dial-In: (202) 594 -3354</li>
                <li>Participant Pin: 351671283</li>
                <li>DCS: <a href="https://conference.apps.mil/webconf/NENAllHands">https://conference.apps.mil/webconf/NENAllHands</a></li>
            </ul>
        </div>
        <div class="third">
            <p><span class="ptitle">NEXT NEN ALL HANDS</span></p>
            <p><span>Monday August 24, 2015</span> <span>2:00 - 4:00 EST</span></p>
        </div>
        <div class="thirdR">
            <p><u>Onsite Attendance</u></p>
            <ul>
                <li>Admiral Gooding Center</li>
                <li>Bldg 22, Washington Navy Yard</li>
            </ul>
        </div>
</div>

CSS

/*----------removes link borders----------*/
.ms-WPBody A:link, .ms-WPBody A:visited {
color: white;
}
.thirdbanner {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
}
.thirdbanner > .third, .thirdbanner > .thirdL, .thirdbanner > .thirdR {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    line-height: 15px;
    text-align: center;
    min-width: 80px;
    color: #2055a4;
    vertical-align: top;
}

.thirdbanner > .third, .thirdbanner > .thirdL, .thirdbanner > .thirdR {
    width:31%;
    padding-left: 1%;
    padding-right: 1%;
}
.thirdbanner > .thirdL {
    background-image: url("http://techstatic.org/falconwood-pitch/AllHands/AllHands_Banner_IconRemote-360.png");
    background-repeat: no-repeat;
    background-position: 50% 100%; 
    height: 380px;
}
.thirdbanner > .thirdR {
    background-image: url("http://techstatic.org/falconwood-pitch/AllHands/AllHands_Banner_IconOnsite-360.png");
    background-repeat: no-repeat;
    background-position: 50% 0%;
    height: 380px;
}
.thirdbanner > .thirdR > p, .thirdbanner > .thirdL > p {
    padding-top: 370px;
    font-family: tahoma,verdana,arial,helvetica,sans-serif;
}
.thirdbanner > .third > p {
    font-size: 20px;
    font-family: tahoma,verdana,arial,helvetica,sans-serif;
}
.ptitle {
    font-weight: bold;
    font-family: tahoma,verdana,arial,helvetica,sans-serif;
}

.thirdR > ul, .thirdL > ul {
    list-style-type: none;
    text-align: left;
    padding-left: 60px;
    margin-top: -6px;
    font-family: tahoma,verdana,arial,helvetica,sans-serif;
}

@media screen and (max-width: 1119px) {
.thirdbanner > .thirdL {
    background-image: url("http://techstatic.org/falconwood-pitch/AllHands/AllHands_Banner_IconRemote-200.png");
    background-repeat: no-repeat;
    background-position: 50% 100%;
    height: 210px;
}
.thirdbanner > .thirdR {
    background-image: url("http://techstatic.org/falconwood-pitch/AllHands/AllHands_Banner_IconOnsite-200.png");
   ...