JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<button class="btn btn-primary">Click me!</button>
<div class="lata">Say stuff!</div>

CSS

.btn {
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  padding: .5rem 1rem;
  font-size: 1rem;
  border-radius: .25rem;
  transition: all .2s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: #0275d8;
  border-color: #0275d8;
}

.btn-primary:hover {
  background-color: #02457e
}

.lata {
  opacity: 0;
  transition: 2s;
}

.yo {
  border: 1px solid grey;
  padding: 1em 2em;
  opacity: 1;
}

JavaScript

var btn = document.querySelector('.btn'),
  div = document.querySelector('.lata')

btn.addEventListener('click', function() {
  div.classList.toggle('yo')
})