JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="text"></textarea><br/><br/>
<span id="heart">&lt;3</span>

CSS

#heart{
   background-color: pink;
   padding: 3px;
   border: 1px red solid;
   border-radius: 6px;
   cursor: pointer;
   color: red;
}

#heart:hover{
   border:1px pink solid;
   background-color: white;
}


#heart:active{
   color: white;
   background-color: red;
}

JavaScript

$(document).ready(function(){
	$('#heart').click(function(){
   	$('#text').append('<3 ')
   })
	
})