JSFiddle - React, Tailwind, and code Playground

HTML

<div id="favourite_user" class="unfavourited"></div>

CSS

#favourite_user {
    position: relative;
    width: 25px;
    height: 22.5px;
	margin: 30px;
	cursor:pointer;
}
#favourite_user.favourited:before,#favourite_user.favourited:after {
	background: #3498db;
}
#favourite_user.unfavourited:before,#favourite_user.unfavourited:after {
	background: #fff !important;
	border: 1px solid #3498db;
}
#favourite_user:before,
#favourite_user:after {
    position: absolute;
    content: "";
    left: 12.5px;
    top: 0;
    width: 12.5px;
    height: 20px;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 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%;
}
#favourite_user:after {
    left: 0;
	border-left:0px !important;
    -webkit-transform: rotate(45deg);
       -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

$('#favourite_user').on("click", function() {	
    $(this).toggleClass('favourited unfavourited');
});