JSFiddle - React, Tailwind, and code Playground

by GaryC123

HTML

<div class="header circle">
    <div class="green" data-size="3"></div>
    <div class="yellow" data-size="6"></div>
</div>

CSS

.circle > div {
    border-radius: 50%;
    display: inline-block;
    margin-right: 20px;
}
.green {
    width: 200px;
    height: 200px;
    background: green;
}
.yellow {
    width: 200px;
    height: 200px;
    background: yellow;
}
.header {
    background:pink
}

JavaScript

var resizeTimer;
$(window).resize(function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doresize, 200);
});

function doresize() {
    $(".circle > div").each(function () {
        $(this).css("width", parseFloat(parseFloat($(window).width() / $(this).data("size"))))
        $(this).css("height", $(this).width())
    })
}