JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div class="style1" id="Layer3">
    <textarea id="msg" style="height:50px;width:250px" rows="10" cols="80" onkeyup="typed()"></textarea></div>
<div id="Layer1">Hello World!<img src="body.jpg" alt="Shout !" width="842" height="554" /></div>
<div id="Layer2"><img src="close.jpg" id="close" width="63" height="64" OnClick="action()"/></div>
<div id="Layer4">
    <input type="button" value="Send Line" onclick="sendline()" /></div>
<div id="Layer6" style="color:#FFFFFF;"></div>

CSS

body {
    background-color: #000000;
}
#Layer1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 179px;
    top: 3px;
}
#Layer2 {
    position:absolute;
    width:69px;
    height:64px;
    z-index:2;
    left: 570px;
    top: 543px;
}
#Layer3 {
    position:absolute;
    width:124px;
    height:22px;
    z-index:3;
    left: 473px;
    top: 474px;
}
.style1 {
    color: #FFFFFF;
    font-family: "Segoe UI";
    font-weight: bold;
}
#Layer4 {
    position:absolute;
    width:72px;
    height:27px;
    z-index:4;
    left: 744px;
    top: 485px;
}
#Layer5 {
    position:absolute;
    width:274px;
    height:70px;
    z-index:5;
    left: 422px;
    top: 62px;
}
#Layer6 {
    position:absolute;
    width:638px;
    height:356px;
    z-index:5;
    left: 272px;
    top: 105px;

JavaScript

var status=1;
function action() {
    
    
    
    if(status==1) {
        $("#Layer1").hide("slow");
        $("#Layer3").hide("fast");
        $("#Layer4").hide("slow");
        $("#close").attr("src","open.jpg");
        status=0;
        
    }
    
    else if(status==0) {
        status=1;
        $("#Layer1").show("slow");
        $("#Layer3").show("fast");
        $("#Layer4").show("slow");
        $("#close").attr("src","close.jpg");
        
    }
    
    
    
    
}


function sendline() {
    
    $("#msg").val(" ");
    
}

function typed() {
    var text=$("#msg").val();
    
    $("#Layer6").html(text);
    
}