JSFiddle - React, Tailwind, and code Playground

by Chris Bruford

HTML

<body>
        <nav id="topbar">
            <ul id="navlist">
                <li><a href="#intro">Introduction</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#wexp">Work Experience</a></li>
                <li><a href="#hobbies">Hobbies</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
        <div id="navspace"></div>
        <div id="introcontainer" class="sectioncontainer">
            <section id="introductionSection">
                <a id="intro"><span id="imageCropper"><img src="/images/me.jpg" / id="imageOfMe" /></span></a>
                <h1>Who am I?</h1>
                <p class="keyText">
                Lorem ipsum
                </p>
            </section>
        </div>

        <div id="skillscontainer" class="sectioncontainer">
            <section id="skillsSection">
                <a id="skills"><h2>My Skills/Knowledge</h2></a>
                <p class="keyText">
                Lorem ipsum     
                </p>
            </section>
        </div>

        <div id="wexpcontainer" class="sectioncontainer">
            <section id="workExperienceSection">            
                <a id="wexp"><h3>Work Experience</h3></a>
                <p class="keytext">
                text content here
                </p>      
            </section>
        </div>
            
        <div id="hobbiescontainer"  class="sectioncontainer">          
            <section id="hobbiesSection">    
                <a id="hobbies"><h4>Hobbies</h4></a>                    
                <p class="keytext">
                text content here
                </p>
            </section>
        </div>
        
        <div id="contactcontainer" class="sectioncontainer">
            <section id="contactSection">
                <a id="contact"><h5>Contact</h5></a>
                <p class="keytext">
                text content here
                </p>
          ...

CSS

html { 

}

body
{
    font-family: Calibri,Verdana,arial,serif;
    font-size:16px;
    font-weight:normal;
    padding:0px;
    margin:0px;
    text-align:justify;
    height: 100%;
    min-height:800px;
    background-color:rgba(125,185,232,1); 
    background-image: url(images/fallback-gradient.png); 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,87,153,1)), to(rgba(255,255,255,1)));
    background-image: -webkit-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1)); 
    background-image:    -moz-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
    background-image:     -ms-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
    background-image:      -o-linear-gradient(top, rgba(30,87,153,1), rgba(255,255,255,1));
}

ul, li
{
    list-style-type:none;
    display:inline;
    position:relative;
    z-index:2;
}

p {
    padding: 0px 25% 0px 25%;
    position:relative;
    z-index:2;
}

section {
    position: relative;
    z-index: 2;
    overflow:auto;
    padding: 0px;
}

h1, h2, h3, h4, h5 {
    font-size: 30px;
    font-weight: bold;
    text-transform:uppercase;
    width:50%;
    position: relative;
    z-index: 2;
    left: 15%;
}

button {
    float:right;
    margin: 30px 100px 0px 0px;
    text-transform:uppercase;
    position: relative;
    z-index: 2;
    }

#navspace {
    height: 50px;
    width: 100%;
    position: relative;
    z-index: 2;
}

#topbar {
    position:fixed;
    top:0;
    left:0;
    background-color: rgba(232,232,232,1);
    background-image: url(images/fallback-gradient.png); 
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(242,242,242,1)), to(rgba(232,232,232,1)));
    background-image: -webkit-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1)); 
    background-image:    -moz-linear-gradient(top, rgba(242,242,242,1), rgba(232,232,232,1));
    background-image:     -ms-linear-gradient(top, rgba(242,242,242,1),...

JavaScript

var mapOptions = {
        center: new google.maps.LatLng(51.5028397, -0.2521218),
        zoom: 15
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(51.5028397, -0.2521218),
        map: map,
        icon: image,
    });