JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://chrismichaelscott.github.io/fraphael/downloads/raphael-with-fraphael.min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Lemon"></script>
<!-- can't make external Google font work in the left hand panel! -->
<link  href="http://fonts.googleapis.com/css?family=Lemon" rel="stylesheet" type="text/css" >
    
<div id="test"/>

JavaScript

var paper = Raphael("test");

paper.text(10, 50, "Filters are cool")
    .attr({
        "fill": "red", 
        "stroke": "black",
        "font-family": "Lemon",
        "font-size": "60px",
        "font-weight": "bold",
        "text-anchor": "start"
    })
    .emboss();