JSFiddle - React, Tailwind, and code Playground

by matthijsln

HTML

<!DOCTYPE html>
<html>
​
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <style>
        html {
            overflow: hidden
        }
        #menu{
            font-weight: 300;
        }
        /*Strip de ul van de padding en styling*/
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            position: absolute;
        }
​
        /*Horizontale lijst maken met ruimte er tussen*/
        li {
            display: inline-block;
            float: left;
            margin-right: 1px;
        }
​
        /*Stijl voor de menu links*/
        li a {
            display: block;
            min-width: 140px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            /*    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; */
            font-family: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
            color: #000000;
            background: #ffffff;
            text-decoration: none;
            transition: 400ms;
​
        }
​
        /* lijn onder de nav knoppen */
        li a::before {
            position: absolute;
            z-index: 1;
            bottom: -15px;
            left: 1rem;
            width: calc(100% - 2rem);
            height: 5px;
            background-color: #55127b;
            content: "";
            opacity: 0;
            transition: all .15s ease;
            visibility: hidden;
        }
        /* tonen van de lijn onder de nav knoppen bij een hover */
        li a:hover::before {
            opacity: 1;
            visibility: visible;
        }
​
        li:active {
            font-weight: 700;
        }
​
​
        /*Hover voor top level links*/
        li:hover a {
            /* background: #55127B; */
            /* color: #ffffff; */
            font-family:...