JSFiddle - React, Tailwind, and code Playground

by jj_gutierrez

HTML

<div class="top_notif">
    <span class="cyber">cyber warning</span><span class="hidden">ts</span>
    <span class="bannere">Beware of unsolicited emails or inquiries claiming to be from Elite Model Management. Please click <a href="/beware" class="link">here</a> for full details.</span>
    <span class="hidden">ts</span>
    <a href="#" id="close_link"><img class="close_img" src="http://www.elitemodel.com/media/publicsite/home/images/close_home.png"></a>
    <input type="hidden" value="0" id="input_val">
</div>

CSS

.top_notif {
            background: #bfbfbf;
            height: 50px;
            width: 100%;
            position: relative;
            top: 0;
            text-align: center;
            display: flex;
            vertical-align: middle;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        .cyber{
            color:#cb0000;
            font-family: 'AvantGarde-Medium';
            text-transform: uppercase;
        }
        .bannere{
            color: #4f4f4f;
            font-family: helvetica;
        }
        .hidden{
            visibility: hidden;
        }
        .link{
            text-decoration: underline;
            color: #4f4f4f;
        }
        .close_img{
            height: 10px;
        }