JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search_bar_box" style="width: 100px">
<br>
<p>window width: <span>0</span>

</p>

JavaScript

function winWidth() {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],
            x = w.innerWidth || e.clientWidth || g.clientWidth,
            y = w.innerHeight || e.clientHeight || g.clientHeight;
        return x;
    }

    $(document).ready(function () {
        $(window).resize(function () {
            $("span").text(winWidth());
            set(winWidth());
        }).trigger('resize');
    });

    function set(x) {
        if (x >= 700) {

            $('#search_bar_box').focus(function () {
                $(this).stop(true).animate({
                    width: '100%'
                }, 500, function () {
                    // Animation complete.
                });
            });

            $('#search_bar_box').blur(function () {
                $(this).stop(true).animate({
                    width: '100px'
                }, 0.1, function () {
                    // Animation complete.
                });
            });

        } else if (x >= 500 && x < 700) {

            $('#search_bar_box').focus(function () {
                $(this).stop(true).animate({
                    width: '70%'
                }, 500, function () {
                    // Animation complete.
                });
            });

            $('#search_bar_box').blur(function () {
                $(this).stop(true).animate({
                    width: '100px'
                }, 0.1, function () {
                    // Animation complete.
                });
            });

        } else if (x >= 350 && x < 500) {
            $('#search_bar_box').focus(function () {
                $(this).stop(true).animate({
                    width: '40%'
                }, 500, function () {
                    // Animation complete.
                });
            });

            $('#search_bar_box').blur(function () {
                $(this).stop(true).animate({
                   ...