JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed soluta, iure pariatur animi non itaque ullam, rem ipsam eum ducimus saepe laborum blanditiis exercitationem, reprehenderit, assumenda amet atque quo. Praesentium.</p>

<div class="what">
  <h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed soluta, iure pariatur animi non itaque ullam, rem ipsam eum ducimus saepe laborum blanditiis exercitationem, reprehenderit, assumenda amet atque quo. Praesentium.</p>
</div>

CSS

:root {
  --color: red;
}

h1, p {
  color: var(--color);
  transition: color 1s;
}

h1 {
  border-bottom: 5px solid var(--color);
}

@keyframes rainbow-mode {
  0%, 100% { --color: red; }
  14% { --color: orange; }
  28% { --color: yellow; }
  42% { --color: green; }
  56% { --color: blue; }
  70% { --color: indigo; }
  84% { --color: violet; }
}

.what {
  animation: rainbow-mode 7s linear infinite;
}