JSFiddle - React, Tailwind, and code Playground

by chrismichaelscott

HTML

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

CSS

h1 {
    font-family: Lemon;
    font-weight: bold;
    font-size: 60px;
    color: SlateBlue;
    text-shadow: 3px 3px 3px grey;
}

JavaScript

var paper = Raphael("test");

paper.text(0, 30, "Filters are ice cold")
    .attr({
        "fill": "MintCream",
        "font-family": "Butcherman",
        "font-size": "54px",
        "text-anchor": "start"
    })
    .emboss(2)
    .shadow();