JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<input id="search-box" type="textarea" name="search"/>

SCSS

body {
    font-size: 12px;
    font-family: helvetica neue, helvetica, sans-serif;
    padding: 10px;
    
    &.mask {
        background: rgba(0, 0, 0, 0.1);
        z-index: 1;
    }
}

#search-box {
    border: 1px solid #888;
    float: right;

&.focused { transition: width 2s;
    font-size: 16px;
    width: 100%;
    padding: 10px;
    }
}

JavaScript

var toReturn = function () {
    function resizeSearchBox() {
        var $searchBox = $('#search-box');
        
        $searchBox.on('focus', function() {
            $(this).addClass('focused');
            $('body').addClass('mask');
            
        }).on('blur', function() {
            $(this).removeClass('focused');
            $('body').removeClass('mask');
        });
    }
    return {
        init: resizeSearchBox()
    }
}();