JSFiddle - React, Tailwind, and code Playground

by Vengatesh rkv

HTML

<div class="red">
            <form>
                <input type="text" class="s" id="txt" placeholder="Search"  onClick="myfunction()"/>
            </form>
        </div>
        <div class="blue">top</div>
        <div class="green">middle</div>
        <div class="yellow">bottom</div>

CSS

.red, .blue, .green, .yellow {
                padding: 10px;
                border: 1px solid #f00;
            }
            .red {
                background: red;
            }
            .blue {
                background: blue;
            }
            .green {
                background: green;
            }
            .yellow {
                background: yellow;
            }
            .s:focus {
                border: 1px solid black;
            }
            .s:focus + yellow {
                display: none;
            }

JavaScript

$(document).ready(function() {
                var width = $(window).width();
               $(window).resize(function() {
                    $(".s").trigger("blur");
                    $(".s").on("focus", function()
                    {
                        var width = $(window).width();
                       if (width < 960)
                        {

                            $(".yellow").hide();
                        }
                    });
                    $(".s").on("blur", function()
                    {
                        $(".yellow").show();
                    });
               });
            });