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{
  counter-reset: el-counter;
}
.item{
  position: relative;
  counter-increment: el-counter;
}
.item::after{
  content: counter(el-counter);
  position: absolute;
  font-size: 18px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript

window.twPlaygroundData = {
    html: {
        initial: `
<div class="container" >
    <div class="item" ></div>
    <div class="item selected" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
    <div class="item" ></div>
</div>
        `,
        controllers: [

        ]
    },
    css: {
        initial: `
.container{
border: 2px solid black;
background-color: #0265ad;
padding: 5px;
}
.item{
border: 2px solid black;
background-color: #a2cff0;
height: 50px;
}
.item.selected{
background-color: #9c88dc;
}
        `,
        controllers: [
            {
                selector: '.container',
                avoidHighlight: true,
                props: [
                    {
                        name: 'display',
                        value: 'grid',
                        type: 'string'
                    },
                    {
                    		name: 'grid-template-columns',
                        value: 'repeat(2, 1fr)',
                        type: 'string'
                    },
                    {
                    		name: 'grid-template-rows',
                        value: 'repeat(3, 50px)',
                        type: 'string'
                    },
                    {
                    		name: 'grid-template-areas',
                        value: '"area-1 area-2" "area-3 area-4" "area-5 area-6"',
                        type: 'string'
                    }
                ]
            },
            {
            	selector: '.item.selected',
              props: [
                {
                  name: 'grid-area',
                  value: 'area-2',
                  type: 'select',
                  hideTextValue: true,
                  options: [
                  	{name: 'area-1'},
                  	{name: 'area-2'},
                    {name: 'area-3'},
                    {name: 'area-4'},
                    {name: 'area-5'},
                    {name: 'area-6'},
     ...