JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<div id="main">
        <div id="vidbox">
            <video autoplay  poster="" id="bgvid" loop>
                <source src="assets/video/filxe.mp4" type="video/mp4">
                <img src="assets/images/vidfallback.png" id="vidfallback">
            </video>
        </div>
        <ul id="navbar">
            <li class="left"><img src="assets/images/logomini.png" id="logo"></li>
            <li class="left"><a href="" class="white">HK Construction Company</a></li>
            <li><a href="#home" id="home">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
        <h1 id="tagline"><span class="bigger">"</span> You Dream, We Build <span class="bigger">"</span></h1>
    </div>
    <div class="box about">

    </div>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100vw;
    background-color: #fff;
    font-size: 100%;
}

#main {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url('../assets/images/bgpattern.png');
}

#vidbox {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

#bgvid{
    width: 100%;
}

#vidfallback{
    width: 100%;
}

#navbar {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
}

#navbar li {
    float: right;
}

#navbar li a {
    display: block;
    color: rgb(35,85,125);
    font-family: 'Josefin Sans', sans-serif;
    text-decoration: none;
    font-size: 28px;
    text-align: center;
    padding: 35px 40px;
}

#navbar li a:hover{
    color: #666;
    -webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    -moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}

#navbar li a:active{
    -webkit-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    -moz-box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
    box-shadow:inset 0px -5px 0px 0px rgb(35,85,125);
}

#logo {
    height: 80px;
    margin: 10px;
}

.left {
    float: left!important;
    background-color: rgb(35,85,125);
}

.white{
    color: #fff!important;
}

#tagline{
    font-size: 50px;
    font-family: 'Alex Brush', cursive;
    margin: 130px;
    color: #fff;
}

.bigger{
    font-size: 80px;
}

.box{
    width: 100%;
    height: 200px;
}