JSFiddle - React, Tailwind, and code Playground

by Victor

CSS

body {
    background:red;
    height:1100px;
}
#elementor {
    width:200px;
    background:#555;
    color:white;
    padding:0px;
    position:fixed;
    bottom:10px;
    left:10px;
}
#elementor-topBar {
    background: #111;
    padding:5px;
    font-style:italic;
}
#elementor-topBar span {
    float:right;
    cursor:pointer
}
#elementor-window {
    padding:5px;
    font-size:15px;
}
#elementor-window-title {
   font-size:17px; 
}
#elementor-window div label {
    margin-left:5px;
}
#elementor-window div span {
    float:right;
}
#elementor-timer {
    background: #111;
    padding:5px;
}

JavaScript

//basic setup
var pluginBody = "<div id='elementor'></div>";
$('body').append(pluginBody);

var pluginHeader = "<div id='elementor-topBar'>Elementor<span>up</span></div>";
$('#elementor').append(pluginHeader);

var windowModel = '<div id="elementor-window"><div id="elementor-window-title">Window:<div><div>';
$('#elementor').append(windowModel);

var windowModelContents = '<div class="windowHeight">	<label for="window height">Height</label>	<span></span></div><div class="windowWidth">	<label for="window width">Width</label>	<span></span></div><div class="windowScroll">	<label for="window Scroll">Scroll</label>	<span></span></div>';
$('#elementor-window').append(windowModelContents);

$('.windowHeight span').text($(window).height());
$('.windowWidth span').text($(window).width());
$('.windowScroll span').text($(window).scrollTop());

$(window).scroll(function(){
$('.windowScroll span').text($(window).scrollTop());
});
$(window).resize(function(){
    $('.windowHeight span').text($(window).height());
$('.windowWidth span').text($(window).width());
});

//timer setup
var timerModel =   "<div id='elementor-timer'><div>0</div><span></span></div>";
$('#elementor').append(timerModel);

var counter = 0;

setInterval(function () {
  ++counter;
    $('#elementor-timer').html(counter);
}, 1000);


$('#elementor-topBar span').click(function(){
    $('#elementor-window').slideToggle(400);
});

$('#elementor-window').hide();