JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fade1">
    <div>1 ms</div>
    <input type="button" value="fade" onclick="fade(1);" />
</div>
<br />
<div id="fade10">
    <div>10 ms</div>
<input type="button" value="fade" onclick="fade(10);" /></div>
<br />
<div id="fade20">
    <div>20 ms</div>
<input type="button" value="fade" onclick="fade(20);" /></div>
<br />
<div id="fade40">
    <div>40 ms</div>
<input type="button" value="fade" onclick="fade(40);" /></div>
<br />
<div id="fade80">
    <div>80 ms</div>
<input type="button" value="fade" onclick="fade(80);" /></div>
<br />
<div id="fade160">
    <div>160 ms</div>
<input type="button" value="fade" onclick="fade(160);" /></div>
<br />
<div id="fade320">
    <div>320 ms</div>
<input type="button" value="fade" onclick="fade(320);" /></div>

JavaScript

window.fade = function(delay) {
    $("#fade" + delay).fadeOut(delay);
};