JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outside">
    <div class="transparentspace"></div>
    <input type="text" />
</div>
<p>Iframe:</p>
<iframe src="http://jsfiddle.net/9wuC4/show">
    <p>Your browser does not support iframes</p>
</iframe>

CSS

iframe {
    width: 400px;
    height: 200px;
}
.outside {
    width: 400px;
    height: 100px;
    background: red;
    margin-top: 0;
}
.outside input[type="text"] {
    display: block;
    margin: auto;
}
.transparentspace {
    height: 30px;
}

JavaScript

$(document).ready(function () {

    /*$.fn.changeStyle = function() { 
     alert('hi'); 
 };
 
 $('input').focus(function() {
changeStyle();
 });*/

    /* Script for main page*/
    $.fn.changeStyle = function () {
        $(".outside").css({
            display: "none"
        });
    }
    /* End script for main page */

    /* Must only work for input fields in the iframe itself !!
    $('input').focus(function () {
        $().changeStyle();
    });
    End for Iframe */
    /* Must I place the script on the page of the Iframe? */

});