JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Heter Iska</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.png">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <style>
        body {
            font-family: "Lato", sans-serif
        }
    </style>
</head>

<body>
<header>
    <div class="topbar" align="center">
        <h1>Links of Links</h1>
    </div>
</header>
<div class="themebackground">
<div class="touch-menu" align="center">
    <div class="column slideout-left" align="right">
        <div class="menu-top menu-left">
            <img class="slideout" src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="scale">
            <div class="slideout-content top-left" id="top-left">
                <ul>
                    <li>
                        <a href="#">scaleLink 1</a>
                    </li>
                    <li>
                        <a href="#">scaleLink 2</a>
                    </li>
                    <li>
                        <a href="#">scaleLink 3</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="menu-bottom menu-left">
            <img class="slideout " src="https://avatarfiles.alphacoders.com/105/thumb-105223.jpg" alt="Book">
            <div class="slideout-content bottom-left" id="bottom-left">
                <ul>
                    <li>
                        <a href="#">bookLink 1</a>
                    </li>
                    <li>
                        <a href="#">bookLink 2</a>
                    </li>
                    <li>
                        <a...

CSS

* {
	box-sizing: border-box;
}
html {
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
}

html, body {
	margin: 0;
	padding: 0;
	height:100%;
	min-height: 100%;
}

h1 {
    font-size: 50px;
    color: aliceblue
}

.topbar {
    margin-top: 0px;
    padding: 1px;
    background-color: #605E5E;
    border-bottom-style: inset;
    border-bottom-color: #888888;
}

.foot {
	position: absolute;
	height: 5vh;
	width: 100%;
	background-color:#605E5E;
	padding: 2px;
	border-top: outset goldenrod;
}

.foot a , .foot p{
	color: goldenrod;
	text-decoration: none;
	font-size: .75vw;
	margin: .5vw 
}


.touch-menu{
	display: flex;
	width: 100%;
	padding: 1vh 0;
	align-items: center;
}



.themebackground{
	display: flex;
	align-items: center;
	min-height: 80%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c7d7dd+0,a7cfdf+16,5085a0+57,23538a+100 */
	background: rgb(199,215,221); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(199,215,221,1) 0%, rgba(167,207,223,1) 16%, rgba(80,133,160,1) 57%, rgba(35,83,138,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(199,215,221,1) 0%,rgba(167,207,223,1) 16%,rgba(80,133,160,1) 57%,rgba(35,83,138,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(199,215,221,1) 0%,rgba(167,207,223,1) 16%,rgba(80,133,160,1) 57%,rgba(35,83,138,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7d7dd', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */

}

ul {
	flex-direction: column;
	display: flex;
	text-align: center;
	list-style-type: none;
	width: 100%;
	height: 100%;
	padding: 1%;
	margin: 1px;
}

ul li {
	flex: 50%;
	font-size: 1.5vw;
	border: thin inset #888585;
	border-radius: 5%;
	margin: 0;
}

ul li a {
	text-decoration: none;
	color: goldenrod;
}

.slideout-content{
	display: none;
	margin: 10px 0px 10px 0px;
	background-color:...