JSFiddle - React, Tailwind, and code Playground

HTML

<!--On my text editor is exactly like this-->
<html>
    <head>
        <title>Awesome Website</title>
    </head>  
    <body>
        <header>
        <span><i class="fa fa-phone" aria-hidden="true"></i> Cell Phone</span>
        <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
        </header>           
        <div class="logo">
            <img src="" alt="Image">
        </div>
        <nav>
            <ul class="topnav">
                <li class="icon">
                    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
                </li>
                <li class="active"><a href="#">HOME</a></li>
                <li><a href="#"> ABOUT</a></li>
                <li><a href="#">CONSULTING SERVICES</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>         
        <!------------Slide Section---------------------------->              
        <section id="slider">
            <img src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" alt="Important Images">
            <img src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" alt="PIGS">
            <img src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" alt="ROADS will be here">
        </section>
    </body>
    
</html>

CSS

*{margin:0;padding:0}

html,body{
  height: 100%;
  width: 100%;
}

img{
    position: absolute;
    width:100%;
    height: 100%;
}
#slider{
    position:relative;
    width: 100%;
    height: 200px;
}