JSFiddle - React, Tailwind, and code Playground

by BANO_notIT

HTML

<div class="hidden" id="msg">
  <div id="btn">
    X
  </div>
  taratata
</div>

SCSS

#msg {
  position: fixed;
  background-color: #f00;
  width: 20%;
  right: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  min-height: 50px;
  #btn {
    position: absolute;
    right: 100%;
    top: 5px;
    width: 20px;
    height: 20px;
    background: blue;
    color: #fff;
    cursor: pointer;
    text-align: center;
  }
  &.hidden {
    right: -20%;
  }
}

JavaScript

btn.onclick = function() {
  this.parentNode.classList.toggle("hidden")
}