JSFiddle - React, Tailwind, and code Playground

by jrunning

CSS

body { font-size: xx-large; }
p { display: inline-block; }

JavaScript

var body = document.getElementsByTagName("body")[0],
    p1 = document.createElement("p"),
    p2 = document.createElement("p"),
    p3 = document.createElement("p"),
    style = document.createElement("style")

// HTML: ☃ (or ☃)
p1.innerHTML = "☃"
body.appendChild(p1)

// JavaScript: \u2603
p2.textContent = "\u2603"
body.appendChild(p2)

// CSS: \2603
style.textContent = 'p:last-child::after { content: "\\2603" }'
body.appendChild(style)
body.appendChild(p3)

// HTML and JavaScript both have two notations: one that starts with
// "x" (&#x...; and \x..., respectively) and one that doesn't (&#...;
// and \u...), but, hilariously, they don't do the same thing.
// JavaScript's "x" indicates a character in the 00-FF range, whereas
// HTML's just means hexadecimal (versus decimal without).