JSFiddle - React, Tailwind, and code Playground

by gunderson

HTML

<div id="container">
    <div id="contents"></div>
</div>

<div id="container" class="offset">
    <div id="contents"></div>
</div>

CSS

#container{
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px dashed #0ff;
    pointer-events:none;
    cursor:pointer;
}

#container.offset{
    width: 100px;
    height: 66px;
    cursor:default;
}

#container #contents{
    display:block;
    position: relative;
    left: -50%;
    top: -50%;
    width: 100%;
    height: 100%;
    background: #f00;
    pointer-events:auto;
    cursor:pointer;
}

#container.offset #contents{
    background: #f0f;
    cursor:default;
}