JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<title>Carpesir - Enter the rabbit hole</title>
<head>
<style>
body {background:black;}

ul {display:block;color:white;background-color:#98bf21;width:170px;padding:4px;font-family:"Lucida Console", Times, Serif;text-align:left;list-style-type:none;margin:0;}
a:link {color:black;text-decoration:none;font-family:"Lucida Console", Times, Serif;}
a:visited {color:white;text-decoration:none;font-family:"Lucida Console", Times, Serif;}
a:hover {background-color:#7A991A;color:yellow;text-decoration:underline;font-family:"Lucida Console", Times, Serif;}
a:active {background-color:#7A991A;color:blue;text-decoration:none;font-family:"Lucida Console", Times, Serif;}

#boxlink {float: right; font-weight:700;color:white;background-color:#98bf21;width:100px;text-align:center;padding:4px;text-decoration:none}
#anavbar {color:white;}
#aokiforsomereason {color:#7A991A}

h1 {color:red;text-align:center;}

#paragraph1 {color:blue;font-family:"Lucida Console", Times, Serif;text-align:center;}
#h2 {color:yellow;font-family:"Lucida Console", Times, Serif;text-align:left;}
#paragraph2 {color:white;font-family:"Lucida Console", Times, Serif;text-align:left; display:inline-block;}
</style>
</head>
<body>
<h1>Welcome to Carpesir's site. As you see, this site is WorkInProgress.</h1>
<p id="paragraph1">I'm Carpesir from NulledBB. If you're here, I'm guessing you already know me.</p>
<p id="paragraph2">While you're here, make sure to visit my profile :^)    <a id="boxlink" href="nulledbb.com/profile/3190">Carpesir on NulledBB</a></p>
<h2 id="h2">Please take a look at the navigation bar:</h2>
<ul>
    <li><a id="anavbar" href="mydomain.com/index.html">Home</a></li>
    <li><a id="anavbar" href="nulledbb.com">NulledBB</a></li>
    <li><a id="anavbar" href="nulledbb.com">Carpesir@NBB</a></li>
    <li><a id="aokiforsomereason" href="nulledbb.com">Aoki for some reason</a></li>
</ul>
</ul>
</body>
</html>