JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="container">
  <div class="text-block-1">Headline</div>
  <div class="text-block-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros nulla, finibus sed dignissim non, scelerisque et ipsum. Proin risus libero, commodo a condimentum a, varius ac velit. Morbi maximus sapien sit amet mi efficitur vestibulum. Fusce semper nisl sed massa vestibulum, in tincidunt libero lacinia. Donec varius et nulla et condimentum. Nullam at odio non libero faucibus blandit vitae in turpis. Donec sagittis ex vel sem eleifend lobortis. Quisque a lacus nulla.
  </div>
</div>

CSS

.container {
  position: relative;
  height: 300px;
  width: 500px;
  background-color: #ccc;
  overflow: hidden;
}

.active .text-block-1 {
  left: 20px;
  opacity: 1;
  color: red;
  transform: scale(1) rotate(360deg);
}

.active .text-block-2 {
  right: 29px;
  opacity: 1;
  color: green;
  transform: scale(1) rotate(360deg);
}

.text-block-1 {
  position: absolute;
  font-size: 30px;
  font-weight: bold;
  font-family: "Helvetica";
  top: 20px;
  left: -100px;
  transition: all 2.5s linear;
  opacity: 0;
  color: white;
  transform: scale(0) rotate(0);
}

.text-block-2 {
  position: absolute;
  font-size: 12px;
  font-weight: bold;
  font-family: "Helvetica";
  top: 70px;
  right: -200px;
  width: 450px;
  line-height: 1.5;
  transition: all 2.5s linear;
  opacity: 0;
  color: white;
  transform: scale(0) rotate(0);
}

JavaScript

$(".container").on("click", function(){
	$(".container").toggleClass("active");
});