JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<div class="main">
  <div class="article">
    <h3>This is an article.</h3>
    <p>
      Integer nisi ex, varius et scelerisque pellentesque, sodales sed erat. Pellentesque fermentum ex sapien, et scelerisque ex sodales sit amet. Nam volutpat ex feugiat nibh cursus, vitae ornare felis elementum. Morbi tincidunt metus ac nisl egestas, sed
      ornare elit viverra. Etiam a odio quam. Aenean cursus massa eget magna pharetra dapibus. Ut lacinia tristique ante ut efficitur. Donec consequat, neque tristique dapibus scelerisque, magna mi efficitur dolor, vitae gravida mi nisl eget ipsum. Proin
      ut nulla ut quam egestas gravida quis sit amet nulla. Fusce eu vulputate justo. Duis vitae odio scelerisque, eleifend nulla in, cursus erat.
    </p>
    <div class="menu">
      <ul>
        <li><a href="">Menu Option 1</a></li>
        <li><a href="">Menu Option 2</a></li>
        <li><a href="">Menu Option 3</a></li>
      </ul>
    </div>
  </div>
  <div class="article">
    <h3>This is an article.</h3>
    <p>
      Integer nisi ex, varius et scelerisque pellentesque, sodales sed erat. Pellentesque fermentum ex sapien, et scelerisque ex sodales sit amet. Nam volutpat ex feugiat nibh cursus, vitae ornare felis elementum. Morbi tincidunt metus ac nisl egestas, sed
      ornare elit viverra. Etiam a odio quam. Aenean cursus massa eget magna pharetra dapibus. Ut lacinia tristique ante ut efficitur. Donec consequat, neque tristique dapibus scelerisque, magna mi efficitur dolor, vitae gravida mi nisl eget ipsum. Proin
      ut nulla ut quam egestas gravida quis sit amet nulla. Fusce eu vulputate justo. Duis vitae odio scelerisque, eleifend nulla in, cursus erat.
    </p>
  </div>
</div>

CSS

.main::before,
.main::after {
  content: "";
  display: table;
  line-height: 0;
  clear: both;
}

.main {
  opacity: 0.5;
  display: block;
  visibility: visible;
}

.articlex {
  opacity: 0.5;
}

.menux {
  opacity: 0.5;
}

ul {
  background: #fcf none repeat scroll 0 0;
  list-style: outside none none;
  width: 120px;
  padding: 0 !important;
  margin: 0 !important;
}

li {
  width: 100%;
}

li a {
  display: block;
  margin: 0;
  padding: 5px 0 5px 5px;
  text-decoration: none;
  width: calc(100% - 5px);
}

li a:hover {
  background: blue;
  color: #fcf;
}

.menu {
  display: block;
  position: absolute;
}