JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <input type="radio" name="layers">
    <div class="layer">
      <p>Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.</p>
      <span>Иоганн Вольфганг Гете</span>
    </div>
  <input checked type="radio" name="layers">
    <div class="layer">
      <p>Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого.</p>
      <span>Иоганн Вольфганг Гете</span>
    </div>
  <input type="radio" name="layers">
    <div class="layer">
      <p>Жизнь, это вам не это блять</p>
      <span>трудовик</span>
    </div>
  <input type="radio" name="layers">
    <div class="layer">
      <p>Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.</p>
      <span>Иоганн Вольфганг Гете</span>
    </div>
  <input type="radio" name="layers">
    <div class="layer">
      <p>У меня депрессия</p>
      <span>RK</span>
    </div>
</main>

CSS

* { box-sizing: border-box; }

body {
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  --layer-height: 150px;
  --layer-width: 350px;

  position: relative;
  display: flex;
  justify-content: center;
  margin-top: var(--layer-height);
  font: 100 16px 'Segoe UI', sans-serif;
}

.layer {
  width: var(--layer-width);
  height: var(--layer-height);
  top: calc(var(--layer-height) * -1);

  position: absolute;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-25%);
  transition: 0.5s;
}

.layer p {
  font-style: italic;
}

.layer span {
  color: #ff6600;
  font-weight: bolder;
}

input {
  cursor: pointer;
}

input:checked + .layer {
  opacity: 1;
  transform: translateY(0);
}