JSFiddle - React, Tailwind, and code Playground

by alga noto

HTML

<div class="thumb"></div>
<div class="info-top">
    <p></p>
</div>

CSS

p {
    background: #ddd;
    height: 200px;
    width:200px;
}
.thumb {
    width: 50px;
    height: 50px;
    background: blue;
    display: inline-block;
}

JavaScript

window.onresize = function () {

    if ($(".project_thumb").css("margin-bottom") === "1px") {
        $('.info-top').prependTo('#Grid');
        $('.data').prependTo('#Grid');

        $('.blurb-bottom').prependTo('#Grid');
        $('.blurb-bottom').removeClass('low');
        $('#middle').hide();

    } else {
        $('.info-top').appendTo('#middle');
        $('.data').appendTo('#middle');
        $('.blurb-bottom').appendTo('#middle');
        $('#middle').show();


    }

    if ($('#container_thumb').is(":hidden"));
    $('.info-top').css({ color: 'green'});
} else {
    $('.info-top').css({
        color: 'blue'
    });


};