JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<h4 class="navn"> Bruschetta (4 stk)</h4>
<div class="beskrivelse">
  <p> Sprøstekt brød krydret med tomater, hvitløk og basilikum. Serveres med og uten ost. </p>
</div>

<h4 class="navn"> Bruschetta (4 stk)</h4>
<div class="beskrivelse">
  <p> Sprøstekt brød krydret med tomater, hvitløk og basilikum. Serveres med og uten ost. </p>
</div>

<h4 class="navn"> Bruschetta (4 stk)</h4>
<div class="beskrivelse">
  <p> Sprøstekt brød krydret med tomater, hvitløk og basilikum. Serveres med og uten ost. </p>
</div>

CSS

h4:hover+.beskrivelse {
  opacity: 1;
  max-height: 100px;
}

h4:hover {
  color: red;
}

.beskrivelse {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 3s ease-out;
}