JSFiddle - React, Tailwind, and code Playground

HTML

<div id="permanent">Permanent 1</div>
<div id="permanent">Permanent 2</div>
<div id="hover">On hover</div>
<div id="permanent">Permanent 3</div>
<div id="hover">On hover</div>

CSS

* { box-sizing: border-box; } 
body { padding: 15px; } /* only style */

/* See http://css-tricks.com/color-animate-any-shape-2/ */
@-webkit-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}
@-moz-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}

#permanent {
    height: 100px;
    width: 100%;
    margin-bottom: 15px; /* only style */
    outline: 1px solid #999; /* only style */
    -webkit-animation: super-rainbow 5s infinite linear; 
	   -moz-animation: super-rainbow 5s infinite linear;
    cursor: pointer;
    padding: 5px;
}
#hover {
    text-align: right;
    position: relative;
    top: -115px;
    margin-bottom: -100px;
    height: 100px;
    width: 100%;
    background: #fff;
    outline: 1px solid #999; /* only style */
    cursor: pointer;
    padding: 5px;
}
#hover:hover {
    background-color: transparent;
}