JSFiddle - React, Tailwind, and code Playground

by simevidas

HTML

<div class="box">
    <div class="content">Lorem ipsum</div>
</div>

CSS

.box {
    background-color: gray;
    position: relative;
    width: 400px
}

.box::before {
    content: "";
    display: block;
    padding-top: 30% /* read comments in JS box) */
}

.content {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0
}

JavaScript

/*
    READ THIS:
    
    Inside .box::before, change padding-top to margin-top, and the functionality will break.
    Therefore, padding-top should be used instead, as margin-top depends on other properties
    (it only works if the .box is floated or has a border, etc.)
*/