JSFiddle - React, Tailwind, and code Playground

by javajosh

HTML

<div class="canvas">
    <p>200px high, 80% wide</p>
    <div class="green-square"><p>100px square</p></div>
    
<h1></h1>

CSS

body{
    font-family: sans-serif;
}
.canvas{
    height: 200px;
    width: 80%;
    border: 1px solid gray;
    background-color: #eef;
    overflow: hidden;
}
.green-square{
    height: 100px;
    width: 100px;
    background-color: #0a0;
    
    position: relative;
    top: 60px;
    left: 50px;
}

JavaScript

var s = $('.green-square');
console.log(s);

$('h1').text(s.offset().top);

debugger;