JSFiddle - React, Tailwind, and code Playground

HTML

<span class="menu-Trigger" align="center" >&#9776; Menu</span>
        <div class="nav-menu">
            <ul>
                <li><a href="index.html">HOME</a></li>
                <li><a href=#>VIDEOS</a></li>
                <li><a href=#>IMAGES</a></li>
                <li><a href=#>EVENTS</a></li>
                <li><a href=#>TESTIMONIALS</a></li>
                <li class="current"><a href="Contact.html">ENQUIRIES</a></li>
            </ul>
        </div>

        <h1 id="name">Arshdeep Soni</h1>
        <p id="magician">Magician</p>
        <hr>


        <div id="info">
            <h2>Enquiries</h2>
            <p id="contact">Phone: (+44)</p>
            <email id="contact">Email: Bookings@ArshdeepSoni.com</email>
            <p id="i"> For bookings please fill out the form below or email <a style="color:#01b2b2; text-decoration:none;"href="mailto: Bookings@ArshdeepSoni.com?" target="_top"> Bookings@ArshdeepSoni.com</a> and we will endeavour to get back to you within 48 hours.</p>
</div>
            <form id="myForm" method="post" action="Contact.html" onsubmit="#"> 
                <p>Your Name: </p>
                <input type="text" name="name"/>
                <p>Subject: </p>
                <input type="text" name="subject"/>
                <p>Your Email: </p>
                <input type="text" name="email"/>
                <p>Phone Number: </p>
                <input type="text" name="number"/>
                <p>Message: </p>
                <textarea id="message"></textarea>
                <input type="submit" value="Send"/>
            </form>
        

        <div class="main">
        </div>

        <div class="icons">
                <a class="socialIcons" href="http://www.youtube.com" title="Subscribe on YouTube" alt="Arshdeep on YouTube"><img src="images/social/youtube.png"/></a>
        <a class="socialIcons" href="http://www.instagram.com/ArshSoni" title="Subscribe!" alt="Arshdeep Soni"><img src="images/social/instagram.png"...

CSS

body {
    background-color: black;
    background-image: url();
    color:white;
    font-family: sans-serif;
}

#name {
    color:white;
    font-family: coolvetica;
    font-size: 50px;
    text-align: center;
    padding-top: 60px;
    letter-spacing: 6px;
    font-weight: bolder;
    text-transform: uppercase;
}

#magician {
    color:white;
    font-family: raleway;
    font-size: 25px;
    letter-spacing: 11px;
    margin-top: 2%;
    text-align: center;
}

hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, #ffffff, #ccc);
    background-image:      -o-linear-gradient(left, #ccc, #ffffff, #ccc);
    
    width:50%;
    max-width: 100%;
}

#info {
    width: 50%;
    float:left;
}

#info h2 {
    
    color:white;
    font-family: Baron neue;
    font-size: 30px;
    padding: 30px 0px 0px 10px;
    margin-right: 50%;
}

#info p {
    font-family: sans-serif;
    font-size: 15px;
    padding-top: 10px;
    padding-left: 10px;
    margin-right: 50%;
}

#contact {
    padding-left: 10px;
    line-height: 1.7em;
    margin-right: 50%;
}

#myForm {
    display:inline-block;
}