JSFiddle - React, Tailwind, and code Playground

by Dave Willhite

HTML

<body>
    <div id="container">
        <div id = "outer"  >
            <div id = "inner" ></div>
        </div>
    </div>
</body>

CSS

#outer {
    
    background: green;
    height: 200px;
    width: 200px;
    position: relative;
   }
#inner {
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    overflow: auto;
    background: red;
    transform: translate(-50%, -50%);
    resize: both;
    padding: 1em;
}