JSFiddle - React, Tailwind, and code Playground

by tymeJV

HTML

<div id="articles" style="height:100px; width:100px; background-color:#0066CC; position:fixed; top:50%; left:50%; border-radius:50px; display:none">
<p style="text-align:center; font-size:20px; padding:20px; color:white">Articles</p>
</div>
<div id="videos" style="height:100px; width:100px; background-color:#FF0000; position:fixed; top:50%; left:25%; border-radius:50px; display:none">
<p style="text-align:center; font-size:20px; padding:20px; color:white">Videos</p>
</div>
<div id="random" style="height:100px; width:100px; background-color:#00CF00; position:fixed; top:50%; left:75%; border-radius:50px; display:none">
<p style="text-align:center; font-size:20px; padding:20px; color:white">Random</p>
</div>

JavaScript

$(document).ready(function () {
    $('#articles').fadeIn('1100');
});

$(document).ready(function () {
    $('#videos').fadeIn('800');
});

$(document).ready(function () {
    $('#random').fadeIn('1500');
});

$(document).ready(function () {
    $('#articles').click(function () {
        $('div').fadeOut('slow');
        $('.article').slideDown();
        $('.article').boxfit();
    });
});