JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <center>
<div class="lineleft">
    
    </div>
    <div class="centerbox">
    <span class="Welcome">Welcome</span>
    </div>
    <div class="lineright">
    
    </div>
    </center>
    </body>

CSS

body{
 background-color:black;   
}
.lineleft{
 height: 5px;
    width:40%;
    background-color: white;
        display: inline-block;
        vertical-align: middle;
        -moz-animation: left 2s;
    -webkit-animation: left 2s;
}
.centerbox{
 height: 50px;
    width: 15%;
    border: 5px solid white;
    border-radius: 10px;
    display: inline-block;
        vertical-align: middle;
        -moz-animation: center 2s;
    -webkit-animation: center 2s;
}

.lineright{
 height: 5px;
    width:40%;
    background-color: white;
        display: inline-block;
    vertical-align: middle;
    -moz-animation: right 2s;
    -webkit-animation: right 2s;
        
}
.Welcome{
    color:white;
    line-height: 50px;
        -moz-animation: welcome 5s;
    -webkit-animation: welcome 5s;
}
@-webkit-keyframes welcome {
    from { color: transparent }
    to { color:#fff }
}

@-moz-keyframes welcome {
    from { color: transparent }
    to { color:#fff }
}
@-webkit-keyframes left {
    from { width: 0 }
    to { width:40% }
}

@-moz-keyframes left {
    from { width: 0 }
    to { width:40% }
}

@-webkit-keyframes right {
    from { width: 0 }
    to { width:40% }
}

@-moz-keyframes right {
    from { width: 0 }
    to { width:40% }
}
@-webkit-keyframes center {
    from { width: 0 }
    to { width:15% }
}

@-moz-keyframes center {
    from { width: 0 }
    to { width:15% }
}

.footer{
 bottom:0;
    position:absolute;
}