JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<details class="hamburger">
  <summary aria-label="Geheimnis!">
    <svg viewbox="0 0 20 20">
      <line x1="3" y1="05" x2="17", y2="05" />
      <line x1="3" y1="10" x2="17", y2="10" />
      <line x1="3" y1="15" x2="17", y2="15" />
    </svg>
  </summary>
  Hallo, ich bin dein versteckter Text
</details>

CSS

details.hamburger {
  position: relative;
  padding-left: 3em;
}

details.hamburger summary {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2em; height: 2em;
}
details.hamburger svg {
  width: 2em;
}
details.hamburger line {
  stroke: black;
  stroke-width: 2px;
  transition: transform 1.5s;
}
details.hamburger line:nth-of-type(1) { transform-origin: 10px 5px; }
details.hamburger line:nth-of-type(2) { transform-origin: 10px 10px; }
details.hamburger line:nth-of-type(3) { transform-origin: 10px 15px; }

details.hamburger[open] line:nth-of-type(1) { transform: translateY(5px) rotate(135deg); }
details.hamburger[open] line:nth-of-type(2) { transform: scale(10%); }
details.hamburger[open] line:nth-of-type(3) { transform: translateY(-5px) rotate(45deg); }