JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
    <div class="hr_top">&nbsp;</div>
    <div class="hr">&nbsp;</div>
    <div class="hr_bot">&nbsp;</div>
    <div class="logo">
        <img src="logo.png">
    </div>
    <div class="logoname">
        <img src="logoname2.png">
    </div>
    <div class="enter"><b><a href "home.html">Enter</a></b>
    </div>
</div>

CSS

#container {
    height:400px;
    width:400px;
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}
.hr {
    width:2px;
    height:350px;
    background-color:#000000;
    position:absolute;
    top:0;
    left:50%;
    z-index:10;
    background: -webkit-linear-gradient(white, black, white);
}
.logo {
    position:absolute;
    top:50%;
    left:10%;
    z-index:10;
}
.logoname {
    position:absolute;
    top:50%;
    left:75%;
    z-index:10;
}
.hr_top {
    width:600px;
    height:2px;
    position:absolute;
    top:10%;
    left:0;
    margin-left:-200px;
    z-index:10;
    background: -webkit-linear-gradient(left, white, black, white);
}
.hr_bot {
    width:600px;
    height:2px;
    background-color:#000000;
    position:absolute;
    top:60%;
    left:-200px;
    z-index:10;
    background: -webkit-linear-gradient(left, white, black, white);
}
.enter {
    position:absolute;
    top:80%;
    left:75%;
    z-index:10;
    font-size:22px;
    font-variant:small-caps;
    font-style:bold;
    font-family:Helvetica;
    color:black;
}
a:link {
    text-decoration:none;
    color:#000000;
}
/* unvisited link */
 a:visited {
    text-decoration:none;
    color:#000000;
}
/* visited link */
 a:hover {
    text-decoration:underline;
    color:#000000;
}
/* mouse over link */
 a:active {
    text-decoration:underline;
    color:#000000;
}
/* selected link */