JSFiddle - React, Tailwind, and code Playground

by 1004lucifer

HTML

<div id="parent1">
    <div id="content1"></div>
</div>
<div id="parent1">
    <div id="content2"></div>
</div>

CSS

#parent1 {
    position: relative;
    width: 100%;
    height: 200px;
    border: 1px solid red;
}

#content1 {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}

#content2 {
    position: absolute;
    left: 50%; top: 50%;
    margin: -25px 0px 0px -50px;
    width: 100px;
    height: 50px;
    border: 1px solid blue;
}