JSFiddle - React, Tailwind, and code Playground

by 3rror404

HTML

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="https://github.com/cjdelisle/cjdns" class="cjdns-menu">cjdns</a>
      <ul class="subnav">
        <li><a href="http://ircerr.ca/">Irceer website</a></li>
        <li><a href="map/d3map.html">Map of Hyperboria made by Ircerr</a></li>
        <li><a href="http://hia.cjdns.ca/watchlist">Ircerr list Hyperboria of Links</a></li>
        <li><a href="http://cjdns.ca/peers.txt">Hyperboria login</a></li>
      </ul>
    </li>

    <li><a href="about.html">About</a></li>
  </ul>
</nav>

<h2>Trending</h2>
<iframe width="1279" height="583" src="https://www.youtube.com/embed/76Gee1xsufE" title="Passive Income is one step away with The PKT Cube" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<br><br><br>
<hr>
<p>Send me <b>BTC</b> I am poor :< bc1qgyvnkc5ufywrhmdfkdu25xnepyddwr663m2v4v</p>

CSS

html {
	font-size: 22px;
}

body {
	background-color: #333;
	color: #6c92a8;
}

a {
	color: aliceblue;
}

a:visited {
	color: lightgray;
}

a:hover, a:active {
	color: #eee
}

nav ul {
	list-style-type: none; /* remove the bullet points */
	margin: 0; /* remove the margin */
	padding: 0; /* remove the padding */
  display: flex; /* flex here instead of floating the children */
}

nav > ul > li {
  position: relative;
}

nav a {
	display: block; /* display the links as block elements */
	padding: 14px 16px; /* add some padding to the links */
	text-align: center; /* center the text inside the links */
	text-decoration: none; /* remove the underline from the links */
}

.subnav {
  display: none;
  background: white;
  position: absolute;
  top: 50px;
}

nav li:hover .subnav {
  display: block;
}

.subnav a {
  color: black;
  text-align: left;
  white-space: nowrap;
}