JSFiddle - React, Tailwind, and code Playground

HTML

<form id="heart" >
	<button id="like_btn" class="outline" type="submit" ></button>
</form>

CSS

.outline {
   background: red;
}

#heart .outline:before, #heart .outline:after {
position: absolute;
content: "";
left: 28px;
top: 1px;
width: 15px;
height: 27px;
background: inherit;
-moz-border-radius: 50px 50px 0 0;
border-radius: 85px 60px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart .outline:after {
left: 13px;
-webkit-transform: rotate(45deg);
border-radius: 45px 60px 0 0;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

JavaScript

$("#heart").on('submit',function(e){
    console.log('click heart support');		
    e.preventDefault();
	$('#heart .outline').css('background','green');
});