JSFiddle - React, Tailwind, and code Playground

HTML

<div class="proverbs">
  <div class="modalBox">
    <a href="#"> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</a>
    <p id="data"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
    <a href="#" class="modalclose">&times;</a>
  </div>

  <div class="modalBox">
    <a href="#"> A (g)attë mbrèšarolë facë i (g)attarièddë cëcatë.</a>
    <p id="data"><b>IPA:</b> a atːə mˌbɾɪʃəˈɾolə fat͡ʃ i ˈatːaɾiˌɛdːə t͡ʃə katʰ</p>
    <p id="data"><b>Italian:</b> La gatta frettolosa fa i gattini ciechi.</p>
    <p id="data"><b>English:</b> The hasty cat makes blind kittens.</p>
    <a href="#" class="modalclose">&times;</a>
  </div>
</div>

CSS

.modalBox {
  display: block;
  position: relative;
  text-align: left;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.4s;
  padding: 5px;
  margin-bottom: 2rem;
  height: 2.5rem;
  width: 100%;
  max-width: 800px;

}

.modalBox:target {
  height: 13.5rem;
}

JavaScript

const modals = document.querySelectorAll('.modalBox');

modals.forEach((modal, index) => {
  const id = `modalBox${index}`;
  modal.id = id
  const link = modal.querySelector('a');
  link.setAttribute('href', `#${id}`)
});