JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="element"></div>
</div>
<div id="element2"></div>

CSS

#container {
    width: 200px;
    height: 200px;
    border: 1px solid black; 
    padding: 2px;
}
#element {
    width: 10%;
    margin: 10%;
    padding: 10%;
    height: 10%; 
    background: green;
    border: 1em solid black;
}

#element2 {
    position: absolute;
    top: 20%;
    left: 2em;
}

JavaScript

function css( el, name ){
    console.log(window.getComputedStyle(el, null).getPropertyValue(name));
}

var el = document.getElementById('element');

console.log('margins:');
css(el, 'margin-top');
css(el, 'margin-right');
css(el, 'margin-bottom');
css(el, 'margin-left');

console.log('paddings:');
css(el, 'padding-top');
css(el, 'padding-right');
css(el, 'padding-bottom');
css(el, 'padding-left');

console.log('dimensions:');
css(el, 'width');
css(el, 'height');

console.log('borders:');
css(el, 'border-top-width');
css(el, 'border-right-width');
css(el, 'border-bottom-width');
css(el, 'border-left-width');

var el2 = document.getElementById('element2');
console.log('position:');
css(el2, 'top');
css(el2, 'left');