JSFiddle - React, Tailwind, and code Playground

by nicos08

HTML

<div class="nav">
<div class="plastic">
<h2>Lorem Ipsum</h2>
</div>
</div>

CSS

.nav {
  background-color: #1c0500;
}
h2 {
    display: inline-block;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 40pt;
    background: linear-gradient(rgb(0,0,0), rgb(255,0,0), rgb(0,0,0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}
.plastic {
  background-color: rgba(100, 100, 255, 0.5);
}
h2:hover {
  background: linear-gradient(rgb(0,0,0), rgb(0,0,255), rgb(0,0,0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-transition: background-color 2s ease-out 2s;
  -moz-transition: background-color 2s ease-out 2s;
  -o-transition: background-color 2s ease-out 2s;
  transition: background-color 2s ease-out 2s;
}