JSFiddle - React, Tailwind, and code Playground

by anothernick

HTML

<div id="wrap">
    <div id="sdimage">
        <div id="imguri"></div>                
    </div>
    <div id="container" style="position:relative;margin-top:1px">
        <!--<div class="divider"></div>-->
        <!--<div id="vertDivide"></div>-->
        <div id="logon">
            <h2>Sign In</h2>
            <div class="divider"></div>
            <br/>
            <p>
                <strong>Username</strong><br/>
                <input type="text"/>
            </p>
            <br/>
            <p>
                <strong>Password</strong><br/>
               <input type="text"/>
            </p>
            <a style="margin-top:10px;" href="javascript:void(0)" class="btn">Sign in</a>
        </div>
        <div id="news">
            <h2>News</h2>
            <div class="divider"></div>
            <br/>
            <p>
                Date<a href="">some news happened</a>
            </p>
            <p>
                Date<a href="">some news happened</a>
            </p>
            <p>
                Date<a href="">some news happened</a>
            </p>
        </div>
    </div>
</div>

CSS

*{
    font: 16px arial, Helvetica, sans serif;
    margin: 0;
    padding: 0;
}

h2{
    color: #555;
    text-shadow: 1px 0 #FFF;
}

p{
    font-size: 12px;

}

p strong{
    font-size: 13px;
    font-weight: bold;
}

#wrap{
    padding: 8px;
    margin: 10px auto;
    height: 300px;
    width: 600px;
    /*background-color: #FFF;
    border: 1px solid #EFEFEF;
    box-shadow: 1px 1px 1px #555;*/
}

#sdimage{
    position: relative;
    padding: 4px;
    margin-left: -20px;
    height:30px;
    width: 620px;
    background-size:200px 30px;
    background-color: #1A4D80;
    border-top-left-radius: 3px;
    box-shadow: inset 1px 0 1px #4679bd, 1px 1px 1px #999;
}
#sdimage:after {
    content: '';
    display: block;
    height: 15px;
    width: 4px;
    position: absolute;
    top: 38px;
    left: 0px;
    background: transparent; 
    z-index: -1;
    border-top: 80px solid #eed993;
    border-left: 120px solid transparent;
}
#sdimage img{
    margin-left: 12px ;
}

#logon{
    background-color: #EFEFEF;
    position: absolute;
    height: 240px;
    width: 285px;
    padding: 10px;
     box-shadow: 1px 1px 1px #555;
}

#news{
    padding: 10px;
    background-color: #EFEFEF;
    position: absolute;
    height: 240px;
    width: 270px;
    right: 0;
     box-shadow: 1px 1px 1px #555;
}

#vertDivide{
    width: 1px;
    height: 230px;
    border-left: 1px solid rgba(0,0,0,.4);
    margin-top: -1px;
    position: absolute;
    left: 330px;
}

.divider{
    height:1px;
    background: #FFF;
    border-top: 1px solid rgba(0,0,0,.4);
    margin-top: 8px;
    width: 100%;
}

input{
    height: 30px;
    width: 100%;
    box-sizing: border-box;
}
body{
    
}

#imguri{
...