JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class="MenuContainer">
  <div class="Menu">
    <div class="BeforeFirst Inline Home">
      <a href="https://www.google.com/" target="_blank"class="nostyle">Home</a>
    </div>
    <div class="Before Inline Contacts">
       <a href="https://www.google.com/" target="_blank"class="nostyle">Contacts</a>
    </div>
    <div class="Before Inline About">
       <a href="https://www.google.com/" target="_blank"class="nostyle">About</a>
    </div>
    <div class="Before Inline Sitemap">
       <a href="https://www.google.com/" target="_blank"class="nostyle">Sitemap</a>
    </div>
  </div>
</div>

CSS

.MenuContainer {
  margin-left: calc(50% - 140px);
}

.Menu {
  background: blue;
  color: white;
  display: inline-block;
  width: 250px;
  padding-left: 30px;
}
.nostyle{
  color: white;
  text-decoration: none;
}

.Inline {
  display: inline-block;
}

.Before:before {
  content: "|";
}

.Home,
.Contacts,
.About,
.Sitemap {
  cursor: pointer;
}

@media screen and (max-width: 780px) {
  .Before:before,
  .BeforeFirst:before {
    content: "";
  }
  .Inline {
    display: block;
  }
  .MenuContainer {
    margin-left: 0px;
  }
  .Menu {
    width: 70px;
    padding-left: 0px;
  }
}

@media screen and (min-width: 781px) {
  .Home:hover:after,
  .Contacts:hover:after,
  .About:hover:after,
  .Sitemap:hover:after {
    content: '';
    display: block;
    position: absolute;
    background: red;
    height: 50px;
    width: 50px;
  }
  .nostyle{
    color: white;
    text-decoration: none; 
  }
}

JavaScript

/*

.nostyle {
    color: white;
    text-decoration: none;
}

*/