JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="myblock">
            <div id="left"></div>
            <div id="center">
                <form>
                    <input type="text" name="a" value="Type your word here!" />
                     <button name="copy" value="copy click!" />
                </form>
                <button><strong>Alert!</strong>

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

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:green
}
#center {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:red
}
#right {
    height:100px;
    width:33%;
    top:50%;
    margin-top:-50px;
    float:left;
    position:relative;
    background-color:blue
}
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 = $("copy").html;
        alert(word);
    });
});