JSFiddle - React, Tailwind, and code Playground

FizzBuzz Test

by Jennifer Perrin

HTML

<pre class="code code-javascript"><label>JS</label><code id="fizzBuzz"></code></pre>

CSS

pre {
    background: #f0f0f0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px auto;
    border: 2px solid #dcdcdc;
    position: relative;
    width: 80%;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #999999;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #dcdcdc;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre.code-css code { color: #91a7ff; }
pre.code-html code { color: #aed581; }
pre.code-javascript code { color: #2675e3; }
pre.code-jquery code { color: #4dd0e1; }

JavaScript

$line = 0;
console.log = function(str) {
    var $console = document.querySelector('#fizzBuzz');
    $console.innerHTML = $console.innerHTML + ++$line + ": " + str + "<br>"
}

for(x=0;x++<50;)console.log((x%3?"":"fizz")+(x%5?"":"buzz"));
//for(x=0;x++<50;)console.log((x%3||"fizz")+(x%5||"buzz"));