JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<a href="#">
  <span class="text">button</span>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, minus cum earum corrupti, aliquid accusantium, perspiciatis laborum perferendis aliquam maiores iusto eius? Animi, unde, harum!
  </div>
</a>

SCSS

a {
  display: block;
  width: 500px;
  margin: 40px;
  font-size: 16px;
  color: #000000;
  &:link,
  &:hover {
    text-decoration: none;
  }
  .text {
    display: block;
    padding: 10px;
    border: 1px solid #000;
  }
  .content {
    display: none;
    opacity: 0;
    transition: display 1s ease allow-discrete, opacity 1s ease;
    /* transition-behavior: allow-discrete; */
  }
  &:hover {
    .content {
      display: block;
      opacity: 1;
      /* transition: display 0.3s ease, opacity 0.3s ease allow-discrete; */
    }
  }
}