JSFiddle - React, Tailwind, and code Playground

by Aakash Khapare M

HTML

<div id="fb-root"></div>
<div class="container">
     <h1 class="container">〈Magnetic〉writesomething</h1>

    <div style="display: block;">
        <div id="imgDiv" class="image">
            <img src="http://game.magnetic.hk/image.php?text=writesomething
  " />
            <p id="display"></p>
        </div>
    </div>
    <p>Write something：</p>
    <form action="image.php" method="post" name="myform">
        <textarea style="width:600px;" name="text" id="inputtext" placeholder="上限為16個字">中秋祝你乜乜乜</textarea>
        </br>
        </br>
    </form>
</div>

CSS

html {
    display: table;
    margin: auto;
}
body {
    display: table-cell;
    padding: .8em 2em .8em 20px;
}
.image {
    position: relative;
    width: 100%;
    /* for IE 6 */
}
h2 {
    position: relative;
    top: 80px;
    left: 360px;
    width: 200px;
    height: 90px;
    color:#FFFFFF;
    font-size:36px;
    margin: 0 auto;
}
h4 {
    width: 600px;
}
img {
    width: 100%;
    height: auto;
    z-index:-1;
}
div.relative {
    position: relative;
    left: 20px;
    border: 3px solid #8AC007;
}
#container {
    width:600px;
    height:350px;
    position: relative;
}
#image {
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    height: auto;
}
#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 22px;
    font-weight: bold;
    left: 250px;
    top: 80px;
}

JavaScript

$("#inputtext").on("keydown", myFunction);

function myFunction() {
    var x = $(this).val();
    console.log(x);
    $("#display").text(x);

    $('#imgDiv > img').attr('src', 'http://game.magnetic.hk/image.php?text=' + x);

}