Js Editor

<!DOCTYPE html><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
<title>Js Editor</title><style>
:root{box-sizing:border-box;
width:1100px;height:100%;margin:0;padding:0;
}
html{box-sizing:border-box;display:flex;
width:100%;height:100%;margin:0;padding:0;
}
body{display:flex;box-sizing:border-box;
width:100%;height:100%;margin:0;padding:0;
box-sizing:border-box;
}
textarea{display:flex;box-sizing:border-box;
padding:10px;margin:0;width:35%;height:100%;
background:#303030;color:coral;
font-family: Arial, Helvetica, sans-serif;
border:8px solid #222;
resizable:none;white-space: nowrap; overflow: auto;      
outline: 1px solid #000;
}
::-webkit-resizer{display:10px;
}
</style></head><body>
<textarea id="html">
<h1>HTML / CSS / JS  EDITOR</h1>

<animate attributeName='stroke-opacity' 
calcMode='spline' 
dur='2' 
values='1;0' 
keyTimes='0;1' 
keySplines='0 .2 .5 1' 
repeatCount='indefinite'>
</animate></circle></svg>
</textarea><textarea id="css">
body{
background: url('https://raw.githubusercontent.com/urln/urln/refs/heads/main/svg/bgr.svg');
background-repeat: no-repeat;
background-attachment: fixed; 
background-size: 300%;
}
</textarea>
<textarea id="js">
$("h1").css( "color","green");
</textarea>
</body></html>