JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<script>
function myFunction() {
    var x = document.getElementById("mymenue");
    if (x.className === "menue") {
        x.className += " responsive";
    } else {
        x.className = "menue";
    }
}
</script>

<div class="menue" id="mymenue">
  <a href="index.html">Home</a>
  <a class="secondBG" href="sides/tauchen.html">Tauchen</a>
  <a class="secondBG" href="sides/ocean.html">Ocean</a>
  <a class="secondBG" href="sides/aboutme.html">About me</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

CSS

.menue
{
	height: 50px;
  overflow: hidden;
	background-color: #1e5799;
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 50px);
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 50px);
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 50px);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
	background-repeat: repeat;
	background-position: top left;
}

.menue a 
{
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin-left: 15px;
}

.menue a:hover 
{
  color: #008eff;
}

.menue .icon 
{
  display: none;
}

@media screen and (max-width: 700px) 
{
	.menue a:not(:first-child) {display: none;}
  .menue a.icon 
  {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .menue.responsive {
  	position: relative;
		overflow: visible;
	}
  .menue.responsive .icon 
  {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menue.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .secondBG {
	background-color: #1e5799;
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
	background-repeat: repeat;
	background-position: top left;
	max-width: 150px;
}
}