JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, explicabo, ab rem unde tempora ullam repudiandae ducimus perspiciatis, labore consequuntur ad blanditiis dolores est nostrum, nam recusandae? Nemo, recusandae! Placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, explicabo, ab rem unde tempora ullam repudiandae ducimus perspiciatis, labore consequuntur ad blanditiis dolores est nostrum, nam recusandae? Nemo, recusandae! Placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, explicabo, ab rem unde tempora ullam repudiandae ducimus perspiciatis, labore consequuntur ad blanditiis dolores est nostrum, nam recusandae? Nemo, recusandae! Placeat.</div>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, explicabo, ab rem unde tempora ullam repudiandae ducimus perspiciatis, labore consequuntur ad blanditiis dolores est nostrum, nam recusandae? Nemo, recusandae! Placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, explicabo, ab rem unde tempora ullam repudiandae ducimus perspiciatis, labore consequuntur ad blanditiis dolores est nostrum, nam recusandae? Nemo, recusandae! Placeat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, explicabo, ab rem unde tempora ullam repudiandae ducimus perspiciatis, labore consequuntur ad blanditiis dolores est nostrum, nam recusandae? Nemo, recusandae! Placeat.</div>

CSS

body {
  background: black;}
  
  * {
    backface-visibility: hidden;
  }
div.a , div.b {
  font-size: 20px;
  color: red;
  transition: 1s;
  position: absolute;
}
div.b {
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
color: white;
animation: a 1s infinite;
}
div.b:hover {
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}
@keyframes a  {
  100% {
      -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}