<button id="button">Aprimi</button>

<div class="block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse in reprehenderit odio corrupti placeat! Necessitatibus consequuntur voluptates, hic incidunt exercitationem natus? Libero, ratione recusandae, ipsum corrupti, consequatur officiis amet voluptatibus ad excepturi ullam non expedita veniam ex nemo autem! Reiciendis alias adipisci deleniti quidem deserunt, est qui totam voluptates culpa!</div>
body {
  padding: 20px;
}

button {
  display: block;
  cursor: pointer;
  margin: 0 auto;
  width: 100%;
  max-width: 150px;
  text-align-center;
  padding: 15px;
  background-color: #5b55a1;
  color: #fff;
  text-transform: uppercase;
  border: none;
  border-radius: 5px;
}

.block {
  display: none;
  max-width: 500px;
  margin: 50px auto 0;
  width: 100%;
  background-color: #36b1bd;
  color: #fff;
  opacity: 0;
  padding: 20px;
  box-sized: border-box;
  transition: opacity .3s ease, display .3s ease allow-discrete; 
  
  &.open {
    opacity: 1;
    display: block;
  }
}

@starting-style { 
  .block.open {
    opacity: 0;
  }
}
document.querySelector('#button').addEventListener('click', () => {
  document.querySelector('.block').classList.toggle('open');
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.