JSFiddle - React, Tailwind, and code Playground

by Tysonzero

HTML

<title>Title</title>
<link rel='icon' href='images/logo.svg'>
<body id='index' class='home'>
    <header>
        <a href='#'>
            <img src='images/name.svg' class='logo'>
        </a>
        <nav> 
            <a href='index.html'>about</a>
            <a href='#'>design</a>
            <a href='#'>analysis</a>
            <a href='#'>contact</a>
        </nav>
    </header>
    <main>
        <img src='images/temp.png' class='image'>
        <img src='images/temp.png' class='image'>
        <img src='images/temp.png' class='image'>
        <img src='images/temp.png' class='image'>
    </main>
</body>

CSS

* {
    all: unset
}
@font-face {
    font-family:'biolinum';
    src: url('LinBiolinum_R.woff'), local('Linux Biolinum O');
}
body
{
    overflow: hidden;
}
.logo {
    float: left;
    height: 50px;
    width: 500px;
    padding: 5px;
}
.image {
    height: auto;
    width: 100%;
    background: black;
}
header {
    box-sizing: border-box;
    height: 20vh;
    width: 100%;
    overflow: auto;
    background: white;
}
main {
    box-sizing: border-box;
    top: 60px;
    height: 80vh;
    overflow: scroll;
}
nav {
    list-style-type: none;
    font-family:'biolinum';
    font-size: 1.25rem;
    color: #465053;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}
p {
    font-family:'biolinum';
    font-size: 1rem;
    color: #465053;
    text-align: justify;
}
title {
    display: none;
}