JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <link rel='stylesheet' type='text/css' href='style.css' />
        <script type='text/javascript' src='script.js'></script>
    </head>
    
    <body>
        <div class="myblock">
            <div id="left"></div>
            <div id="center">
                <form>
                    <input type="text" name="a" value="Type your word here!">
                </form>
                <button><strong>Alert!</strong>

                </button>
            </div>
            <div id="right"></div>
        </div>
    </body>

</html>

CSS

.myblock {
    margin-top:60px;
    height:20%;
    width:100%;
}
#left {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:cyan
}
#center {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:cyan
}
#right {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:cyan
}
form {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    display: inline-block;
    margin-left:50px;
}
button {
    height:35px;
    width:70px;
    margin-top: 25px;
    border-radius:5px;
}

JavaScript

$(document).ready(function () {
    $("button").click(function () {
        var word = $("input[name=a]").val();
        alert(word);
    });
});