JSFiddle - React, Tailwind, and code Playground

by jamessouth

HTML

<div>
  <p>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </p>
</div>

CSS

body {
  background-image: url(http://i.stack.imgur.com/JhMU5.jpg);
  background-repeat: no-repeat;
}

div {
  width: 804px;
  height: 1198px;
  position: absolute;
  top: 30px;
  left: 179px;
  background: rgba(255, 105, 180, 0.4);
  transform: skew(20deg, 10deg);
}

p {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  transform: skew(-20deg, -10deg);
}

JavaScript

var div = document.getElementsByTagName("div")[0];
var rect = div.getBoundingClientRect();
var spans = document.getElementsByTagName("span");
console.log(rect);
spans[0].innerHTML = "top: " + rect.top;
spans[1].innerHTML = "right: " + rect.right;
spans[2].innerHTML = "bottom: " + rect.bottom;
spans[3].innerHTML = "left: " + rect.left;
spans[4].innerHTML = "width: " + rect.width;
spans[5].innerHTML = "height: " + rect.height;