JSFiddle - React, Tailwind, and code Playground

by Kamil

HTML

<html>

  <head>
  </head>

  <body>

    <div>
      <div class="clicker" tabindex="1">Click me</div>
      <div class="hiddendiv"></div>
      LOL
    </div>

  </body>

</html>

CSS

.clicker {
  width: 100px;
  height: 100px;
  background-color: blue;
  outline: none;
  cursor: pointer;
}

.hiddendiv {
  display: none;
  visibility: hidden;
  opacity: 0;
  height: 200px;
  background-color: green;
  transition: visibility 0s, opacity 0.5s linear;
}

.clicker:focus+.hiddendiv {
  visibility: visible;
  display: block;
  opacity: 1;
  transition: visibility 0s, opacity 0.5s linear;
}