JSFiddle - React, Tailwind, and code Playground

HTML

<!--===================================================Header===================================================!-->
<div class="wrapper">
    <div class="headerwrap">
        <div class="social">
          	<a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
        	<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
            <a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
        </div><!--close social!-->
        <div class="header">
            <div class="logo">
                <img src="images/logo.png" />
            </div><!--close logo-->
        </div><!--close header!-->
            <div class="menu">
                <ul class="menutxt">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="portfolio.html">PORTFOLIO</a></li>
                    <li><a href="contact.html">CONTACT</a></li>                 
                </ul>
            </div><!--close menu!-->
    </div><!--close headerwrap!-->
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
	<div class="fader">
  		<img class="bottom" src="images/dsas.png"/>
  		<img class="top" src="images/dsa.png"/>
	</div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">      
	<div class="textwrap">
    <div id="test" class="displaynone">
            <div class="contentspace">
            </div><!--close contentspace!-->
            <div class="content">       
                    <p class="headertxt">Specializations</p>
                    <p>With various skills in branding, multi-media 
                    and advertising I am able to provide fresh and inspiring solutions 
                    for the task given to me. Using various programs such as:</p>               
                    <p><img...

CSS

/*---------------------------- Content ----------------------------*/
.displaynone {
    display: none;
}


#test p {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        margin-top:-5px;
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

JavaScript

setTimeout(function(){
        document.getElementById("test").className = "";
    }, 2500);