JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://raw.githubusercontent.com/treinaweb/treinaweb-front-playground/standalone/tw-playground.min.css">
<div id="root" ></div>

CSS

.box-container{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: content-box;
  border: 2px solid black;
  background-color: #0265ad;
  margin: 10px;
}

.ratio{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

JavaScript

window.twPlaygroundData = {
    html: {
        initial: `
        <div class="container" >
<div class="box-container" style="--aspect-ratio: 4/3" >
<span class="ratio" >4:3</span>
</div>
<div class="box-container" style="--aspect-ratio: 16/9" >
<span class="ratio" >16:9</span>
</div>
</div>
        `,
        controllers: [

        ]
    },
    css: {
        initial: `

        `,
        controllers: [
            {
                selector: '[style*="--aspect-ratio"]',
                avoidHighlight: true,
                props: [
                    {
                        name: 'width',
                        value: '100',
                        valueSuffix: "px",
                        type: 'range',
                        properties: [
                        	{
                          	name: 'min',
                            value: '50'
                          },
                          {
                          	name: 'max',
                            value: '300'
                          },
                          {
                          	name: 'step',
                            value: '10'
                          }
                        ]
                    }
                ]
            },
            {
                selector: '[style*="--aspect-ratio"]::before',
                avoidHighlight: true,
                props: [
                {
                        name: 'content',
                        value: '""',
                        type: 'string'
                    },
                    {
                        name: 'height',
                        value: '0',
                        type: 'string'
                    },
                    {
                        name: 'float',
                        value: 'left',
                        type: 'string'
                    },
                    {
                        name: 'padding-bottom',
                        value: 'calc( 100% /...