JSFiddle - React, Tailwind, and code Playground

HTML

<style class="css-container"></style>
<code class=" language-css"><span class="token selector">.container</span><span class="token punctuation">{</span>
   <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
   <span class="token property">flex-direction</span><span class="token punctuation">:</span> <select name="flexdirection">
  <option value="row" selected>row</option> 
  <option value="row-reverse" >row-reverse</option>
  <option value="column">column</option>
  <option value="column-reverse">column-reverse</option>
</select><span class="token punctuation">;</span>
   <span class="token property">flex-wrap</span><span class="token punctuation">:</span> <select name="flexwrap">
  <option value="nowrap" selected>nowrap</option> 
  <option value="wrap" >wrap</option>
  <option value="wrap-reverse">wrap-reverse</option>
</select><span class="token punctuation">;</span>
   <span class="token property">justify-content</span><span class="token punctuation">:</span> <select name="justifycontent">
  <option value="flex-start" selected>flex-start</option> 
  <option value="flex-end" >flex-end</option>
  <option value="center">center</option>
  <option value="space-between" >space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly" >space-evenly</option>
</select><span class="token punctuation">;</span>
   <span class="token property">align-items</span><span class="token punctuation">:</span> <select name="alignitems">
  <option value="stretch" selected>stretch</option>
  <option value="flex-start" >flex-start</option> 
  <option value="flex-end" >flex-end</option>
  <option value="center">center</option>
  <option value="baseline">baseline</option>
</select><span class="token punctuation">;</span>  
   <span class="token property">align-content</span><span class="token punctuation">:</span> <select name="aligncontent">
<option value="stretch"...

CSS

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

.container{
  height: 300px;
}

.item{
  min-height: 20px !important;
  min-width: 20px !important;
}

.item:nth-child(2){ 
  min-width: 20% !important;
  min-height: 37% !important;
}
.item:nth-child(3){ 
  min-width: 40% !important;
  min-height: 35% !important;
}
.item:nth-child(5){ 
  min-width: 35% !important;
  min-height: 20% !important;
}
.item:nth-child(6){ 
  min-width: 27% !important;
  min-height: 28% !important;
}
.item:nth-child(7){ 
  min-width: 18% !important;
  min-height: 37% !important;
}

html, body{
  min-height: 750px;
  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...

JavaScript

const styleContainer = document.querySelector('.css-container'),
	codeContainer = document.querySelector('.language-css'),
  initialCode = `
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: stretch;
   align-content: stretch; 
`;
  


const fdElement = document.querySelector('select[name=flexdirection]'),
	fwElement = document.querySelector('select[name=flexwrap]'),
  jcElement = document.querySelector('select[name=justifycontent]'),
  aiElement = document.querySelector('select[name=alignitems]'),
  acElement = document.querySelector('select[name=aligncontent]');

function getValues(){
	const flexDirection = fdElement.value,
  	flexWrap = fwElement.value,
  	justifyContent = jcElement.value,
  	alignItems = aiElement.value,
  	alignContent = acElement.value;
  return {
    flexDirection,
    flexWrap,
    justifyContent,
    alignItems,
    alignContent
  };
}


function changeStyle(){
	const styleObj = getValues();
	let code = `
   display: flex;
   flex-direction: ${styleObj.flexDirection};
   flex-wrap: ${styleObj.flexWrap};
   justify-content: ${styleObj.justifyContent};
   align-items: ${styleObj.alignItems};  
   align-content: ${styleObj.alignContent}; 
	`;
  setCode(code);
}


document.querySelectorAll('select').forEach(el => {
	el.addEventListener('change', () => {
  	changeStyle();
  })
})





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

startCode();

function setCode(code){
	code = `.container{
   ${code.replace(/^\s+|\s+$/g, '')}  
}`;
	styleContainer.innerText = code;
}