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

.container{
  height: 150px;
}
.item{
  position: relative;
}

JavaScript

window.twPlaygroundData = {
    html: {
        initial: `
<div class="container" >
    <div class="item" >Teste de min-content</div>
    <div class="item" >Teste de max-content</div>
    <div class="item" >Teste de auto</div>
</div>
        `,
        controllers: [

        ]
    },
    css: {
        initial: `
.container{
border: 2px solid black;
background-color: #0265ad;
padding: 5px;
}
.item{
border: 2px solid black;
background-color: #a2cff0;
}
        `,
        controllers: [
            {
                selector: '.container',
                avoidHighlight: true,
                props: [
                    {
                        name: 'display',
                        value: 'grid',
                        type: 'string'
                    },
                    {
                    		name: 'grid-template-columns',
                        value: 'min-content max-content auto',
                        type: 'string',
                    }
                ]
            }
        ]
    },
};



let u="https://raw.githubusercontent.com/treinaweb/treinaweb-front-playground/standalone/tw-playground.min.",a=(t,e)=>{fetch(u+e).then(t=>t.text()).then(e=>{let n=document,a=n.createElement(t);a.innerHTML=e,n.body.append(a)})};a("script","js"),a("style","css");