JSFiddle - React, Tailwind, and code Playground

by makzan

HTML

<div id="demo">
  Rainbow Demo
</div>

CSS

#demo {
  box-sizing: border-box;
  
  background-image: linear-gradient(
    to bottom, snow 40%, 
    red 40%, red 45%, 
    orange 45%, orange 50%, 
    yellow 50%, yellow 55%, 
    green 55%, green 60%, 
    blue 60%);
  background-size: 100% 200%;
  cursor: pointer;
  border: 1px solid lightgray;
  transition: all 0.3s ease-out;
  
  /* Text */
  font-weight: bold;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 2em;
}
#demo:hover {
  background-position-y: 100%;
  color: white;  
}

/* Not related */

#demo {
  width: 300px;
  height: 200px;
}
body {
  padding: 2em;
}