JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
  <input type="number" id="input" min="0" step="1" value="0">
  <button id="fizzMyInput">FizzBuzz this number</button>
</fieldset>

<fieldset>
  <button id='fizzTo100'>FizzBuzz to 100</button> <button id="test">Test my code</button>
</fieldset>

<pre id="output"></pre>

CSS

fieldset {
  border: 0;
}

JavaScript

(function () {
    document.getElementById('fizzMyInput').addEventListener('click', fizzMyInput);
    document.getElementById('fizzTo100').addEventListener('click', fizzTo100);
    document.getElementById('test').addEventListener('click', testMyCode);
})();

function fizzMyInput() {
    const input = document.getElementById('input').value;
    output(fizzBuzz(input));
}

function fizzTo100() {
    const allFizzBuzzes = [...Array(100).keys()].map(fizzBuzz);
    output(allFizzBuzzes.join('\n'));
}

function fizzBuzz(num) {
    let returnValue = '';
    if (num % 3 === 0) returnValue += 'Fizz';
    if (num % 5 === 0) returnValue += 'Buzz';
    return returnValue || String(num);
}

function output(text) {
    document.getElementById('output').innerText = text;
}

function testMyCode() {
    const answers = {
        "-90210": "FizzBuzz",
        "-3": "Fizz",
        "-2": -2,
        "-1": -1,
        "-0": "FizzBuzz",
        0: "FizzBuzz",
        1: 1,
        2: 2,
        3: "Fizz",
        4: 4,
        5: "Buzz",
        6: "Fizz",
        15: "FizzBuzz"
    };

    const results = Object.entries(answers)
        .map(([key, value]) => {
            const status = (fizzBuzz(key) === value) ? 'passed' : 'failed';
            return `${key}: ${value} (${status})`
        });

    output(results.join('\n'));
}