JSFiddle - React, Tailwind, and code Playground

by Michele Marcucci

HTML

<div class="nav">
  <span>P</span>
</div>
<div class="trigger-default">
  <span>A</span>
</div>
<div class="trigger-secondary">
  <span>B</span>
</div>

CSS

span {
  font-size: 80px;
  padding-left: 50px;
}
.nav {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 50px 160px;
  color: #fff;
  cursor: pointer;
}
.trigger-default {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 100px;
  cursor: pointer;
}
.trigger-secondary {
  width: 100px;
  height: 100px;
  display: block;
  background: #7A848F;
  margin: 20px 300px;
  cursor: pointer;
}
.trigger-default,
.trigger-secondary {
  display: inline;
  position: absolute;
  color: #fff;
}
.nav:hover {
  background: #5BBC2E;
}
.trigger-default:hover {
  background: #202021;
}
.trigger-secondary:hover {
  background: #E12B26;
}

JavaScript

$(document).ready(function() {
  $(".nav").on("click", function() {
      $(".trigger-default").toggle(function () {
          $(this).animate({right: "140px"});
      }, function () {
          $(this).animate({left: "140px"});
      });
      
  })
})