JSFiddle - React, Tailwind, and code Playground

by Tobias Yeomans

HTML

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="general.css" type="text/css">
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
</head>

<body>
    <div class="navigation-bar">
        <a href="#">
            <div class="portfolio">
                <h3>Portfolio</h3>
            </div>
        </a>
        <a href="#">
            <div class="twitter">
                <h3>Twitter</h3>
            </div>
        </a>
        <a href="#">
            <div class="git-hub">
                <h3>Github</h3>
            </div>
        </a>
        <a href="#">
            <div class="email">
                <h3>Email</h3>
            </div>
        </a>
        <a href="#">
            <div class="linkedin">
                <h3>LinkedIn</h3>
            </div>
        </a>
        <a href="#">
            <div class="about-me">
                <h3>About Me</h3>
            </div>
        </a>   
    </div>
</body>

</html>

CSS

body {
    margin: 0;
    padding: 0;
    top: 0;
}

a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: black;
}
.navigation-bar {
    float: left;
    width: 350px;
    font-size: 40px;
    height: 100vh;
    text-align: center;
}

.portfolio {
    background-color: #909090;
    height: 16%;
    line-height: 16%;
}

.twitter {
    background-color: #a0a0a0;
    height: 16%;
}

.git-hub {
    background-color: #909090;
    height: 16%;
}

.email {
    background-color: #a0a0a0;
    height: 16%;
}

.linkedin {
    background-color: #909090;
    height: 16%;
}

.about-me {
    background-color: #a0a0a0;
    height: 16%;
}