JSFiddle - React, Tailwind, and code Playground

HTML

<div class="controller-container">
  <div class="flex-options" >
    <label>
      <input type="radio" name="flexoption" value="nowrap" checked /> nowrap
    </label>
    <label>
      <input type="radio" name="flexoption" value="wrap" /> wrap
    </label>
    <label>
      <input type="radio" name="flexoption" value="wrap-reverse" /> wrap-reverse
    </label>  
  </div>
  <div>
    Largura dos Filhos<br>
    <input type="range" value="40" min="10" max="100" step="10" id="childWidth" />
    <span id="childWidthOutput" >40</span>%
    
  </div>
</div>
<style class="css-container"></style>
<code class="language-css"></code>
<div class="flexbox-container">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

CSS

.controller-container{
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
}



html, body{
  min-height: 450px;
  margin: 0;
  padding: 0;
  background-color: #cccccc;
}

label{
  display: block;
  padding: 5px 0;
  cursor: pointer;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.controller-container{
  padding: 15px;
}

.language-css{
  border-radius: 0 !important;
  padding: 15px !important;
  display: block !important;
  white-space: pre !important;
}


.flexbox-container{
  padding: 15px;
}

.container, .item{
  border: 3px solid black;
}

.container{
  background-color: #0066ad;
  padding: 5px;
  counter-reset: itemcounter;
}

.item{
  background-color: #a2cff0;
  min-height: 30px;
  min-width: 30px;
  position: relative;
  font-weight: bold;
  color: black;
  font-size: 20px;
}

.item::after{
   content: counter(itemcounter);
   counter-increment: itemcounter;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


















/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=css */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens:...

JavaScript

const styleContainer = document.querySelector('.css-container'),
	codeContainer = document.querySelector('.language-css');
let initialCode = `
   display: flex;
   flex-wrap: nowrap;
`,
	initialChildCode = `
	width: 40%;  
`;
  
  
  
const flexOptions = document.querySelector('.flex-options');

flexOptions.addEventListener('click', () => {
	const flexWrap = document.querySelector('input[name="flexoption"]:checked').value;
	initialCode = `
   display: flex;
   flex-wrap: ${flexWrap};
	`;
  setCode();
})


const childWidth =  document.querySelector('#childWidth'),
	childWidthOutput =  document.querySelector('#childWidthOutput');
  
childWidth.addEventListener('input', () => {
	const width = childWidth.value;
	initialChildCode = `
  width: ${width}%;
`;
	childWidthOutput.innerText = width;
  setCode();
})













function startCode(){
	try{
  	setCode();
  }catch(e){
  	setTimeout(() => {
    	startCode();
    }, 100);
  }
}

startCode();

function setCode(code = initialCode, childCode = initialChildCode){
	code = `.container{
   ${code.replace(/^\s+|\s+$/g, '')}  
}`;
if(childCode){
	code += `
.item{
   ${childCode.replace(/^\s+|\s+$/g, '')}  
}`
}
	styleContainer.innerText = code;
  codeContainer.innerHTML = getCSSHighlight(code);
}

function getCSSHighlight(code){
	return Prism.highlight(code, Prism.languages.css, 'css');
}



/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=css */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-([\w-]+)\b/i,t=0,n=_self.Prism={manual:_self.Prism&&_self.Prism.manual,disableWorkerMessageHandler:_self.Prism&&_self.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return...