JSFiddle - React, Tailwind, and code Playground
HTML
<div id="console">
<div id="window">
Console text goes here
Console text goes here
Console text goes here
Console text goes here
Console text goes here
</div>
<input type="text" size="60" style="margin:5px;" /> <button>Send</button>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at massa elit. In quis odio libero, vel bibendum ligula. Nullam quis placerat turpis. Phasellus vitae ligula tellus, vitae venenatis sapien. Integer condimentum metus a enim iaculis nec gravida magna pharetra. Fusce et felis metus. Nullam mollis fermentum risus non pellentesque. Nulla at tortor sit amet lectus fermentum varius vitae a quam. Vestibulum ut diam neque. Morbi fermentum dolor eget ligula aliquet pharetra. Maecenas urna metus, tincidunt vitae facilisis sed, lacinia sed est. Fusce quam ipsum, blandit convallis rutrum eget, fermentum at diam. Aenean urna augue, egestas eget convallis id, aliquam eu tellus. Duis et odio sed ante blandit adipiscing.
<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra, urna sed varius rutrum, ligula massa dapibus orci, pharetra porttitor ligula felis vestibulum nunc. Nulla et ipsum vitae turpis laoreet aliquet ut vel arcu. Aliquam malesuada nibh et sapien sollicitudin sed varius libero ultrices. Ut mauris libero, vestibulum ac semper quis, hendrerit et diam. Vivamus venenatis tempor elementum. Aliquam at hendrerit eros. Curabitur pretium ultricies ullamcorper. Nullam vitae auctor ligula. Mauris congue feugiat aliquet. Donec dolor libero, pharetra volutpat molestie a, viverra sit amet quam. Vivamus sodales blandit dolor, quis ornare lectus porta nec. Duis lacinia, tellus nec interdum feugiat, odio libero faucibus magna, eget semper neque nisi vel dui. Sed dolor magna, vulputate in sagittis nec, interdum sed sem. Ut lorem elit, tincidunt in ornare ut, congue id sapien. Donec porta nisi ut...
CSS
body{
font-size:10pt;
font-family:tahoma;
}
#console{
background:#000;
height:300px;
width:100%;
top:0px;
left:0px;
position:fixed;
z-index:999;
display:none;
color:#fff;
text-align:left;
}
#window{
width:95%;
margin:5px auto 5px auto;
background:#999;
height:240px;
padding:8px;
color:#000;
font-size:9pt;
font-family:courier;
}
JavaScript
$(window).keypress(function(e) {
if (e.which == 96 || e.which == 126) {
$('#console').slideToggle();
}
});