JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        p { margin-left:20px; }
        div {
            width: 98px;
            height: 98px;
            border: 1px solid blue;
            background-color: red;
            margin:30px;
        }
        #test2div {
            -webkit-transform:rotate(45deg);                    
        }            
    </style>
    
    <script type="text/javascript">
        var s11, s12, d1, s21, s22, d2;
        window.onload = function() {
            s11 = document.querySelector('#test1span1');
            s12 = document.querySelector('#test1span2');
            d1 = document.querySelector('#test1div');
            s21 = document.querySelector('#test2span1');
            s22 = document.querySelector('#test2span2');
            d2 = document.querySelector('#test2div');
            setInterval(updateWidth, 100);
        }
        
        function updateWidth() {
            s11.innerHTML = d1.offsetWidth;
            s12.innerHTML = d1.getBoundingClientRect().width;
            s21.innerHTML = d2.offsetWidth;
            s22.innerHTML = d2.getBoundingClientRect().width;
        }
    </script>
</head>

<body>
    <div id="test1div"></div>
    <p>offsetWidth of div element is: <span id="test1span1"></span></p>
    <p>getBoundingClientRect().width of div element is: <span id="test1span2"></span></p>
    <div id="test2div"></div>
    <p>offsetWidth of div element is: <span id="test2span1"></span></p>
    <p>getBoundingClientRect().width of div element is: <span id="test2span2"></span></p>    
</body>
</html>