JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="red">Red</a> | <a href="#" id="blue">Blue</a> | <a href="#" id="reset">Reset</a> | 
<p contentEditable="true" id="id1" class="editable" data-ph="My Placeholder String"></p>
<p contentEditable="true" id="id2" class="editable" data-ph="My Placeholder String"></p>
<p contentEditable="true" id="id3" class="editable" data-ph="My Placeholder String"></p>
<span id="button1">Add Emoji1 </span>
<span id="button2">Add Emoji2</span>
<br/>
<a id="getcode">Get Code</a>

CSS

.red
{
    color:red;
}
.blue
{
    color:blue;
}
p
{
    min-height:100px;
    border:1px solid red;
}
a
{
    color:red;
    text-decoration:underline;
}
img
{
    width:20px;
    vertical-align:middle;
}
[contentEditable=true]{
  border:1px solid grey;  
}

[contentEditable=true]:empty:not(:focus):before{
  content:attr(data-ph);
  color:grey;
  font-style:italic;
}

JavaScript

var 
    red = document.getElementById("red"),
    blue = document.getElementById("blue"),
    reset = document.getElementById("reset")
;

red.addEventListener("click", function() { setColor("#f00"); });
blue.addEventListener("click", function() { setColor("#00f"); });
reset.addEventListener("click", function() { setColor("#000"); });

function setColor(color) {
    document.execCommand('styleWithCSS', false, true);
    document.execCommand('foreColor', false, color);
}
$( document ).on( "click focusin" , ".editable" , function(){

    $( ".editable" ).removeClass( "focus" );
    $( this ).addClass( "focus" );

} );
$( document ).on( "click" , "#button1" , function() {

  $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F60C.png"/>' );

});
$( document ).on( "click" , "#button2" , function() {

  $( ".editable.focus" ).append( '<img src="https://cdn.okccdn.com/media/img/emojis/apple/1F30C.png"/>' );

});
$("#getcode").click(function () {
    one=($('#id1').html());
    two=($('#id2').html());
    three=($('#id3').html());
    alert("HTML of div 1: "+one);
    alert("HTML of div 2: "+two);
    alert("HTML of div 3: "+three);
});