JSFiddle - React, Tailwind, and code Playground

by yaw yaw

HTML

<div class="box">
</div>

CSS

.box{
   background-color: red;
  width: 400px;
  height: 200px;
  margin: 50px auto;
  position: relative;
  
  
}
.box:after{
  content: " ";
  width: 0px;
  height: 0px;
   border-top: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 100px solid red;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -100px
 
}

JavaScript

(function(){
  window.onload = function(){
    var box = document.getElementsByClassName("box")[0];

var change = function(){
  box.style.backgroundColor = "green";
};

var normal = function(){
	box.style.backgroundColor = "blue";
}

addEventListener("mouseenter", change, false);
addEventListener("mouseleave", normal, false);
  };


  }());