JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<section>
			<p class="par-head">Language</p>
			<select name="language" id="language">
				<option value="javascript">javascript</option>
				<option value="css">css</option>
				<option value="html">html</option>
			</select>
</section>
<button type='submit'>change language</button>
</form>




<div class="father">
  <div id="editor"></div>
</div>

CSS

.father {
	overflow: hidden;
	border-radius: 20px;
	padding: 15px;
	background: #202328;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

#editor {
	font-size: 14px;
	color: #f8f8f2;
	background: none;
	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.3;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	padding: 15px;
	margin: 0;
}


#editor::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: #202328;
}
#editor::-webkit-scrollbar-thumb {
  background: #000000;
  border-radius: 10px;
}



.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #6272a4;
}

.token.punctuation {
	color: #f8f8f2;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: #ff79c6;
}

.token.boolean,
.token.number {
	color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: #f1fa8c;
}

.token.keyword {
	color: #8be9fd;
}

.token.regex,
.token.important {
	color: #ffb86c;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

JavaScript

import {CodeJar} from 'https://medv.io/codejar/codejar.js';
import Prism from 'https://cdn.skypack.dev/prismjs';



const jar = CodeJar(
  document.querySelector('#editor'), 
  (editor) => {
    editor.innerHTML = Prism.highlight(
      editor.textContent, 
      Prism.languages.javascript, 
      'javascript'
    );
  }
);

jar.updateCode(`const jar = CodeJar(
  document.querySelector('#editor'), 
  Prism.highlightElement
);`);


document.querySelector("form").addEventListener("submit", function(event) {
  event.preventDefault ? event.preventDefault() : event.returnValue = false;
  let lang = event.target[0].value;

  CodeJar(
  document.querySelector('#editor'), 
  (editor) => {
    editor.innerHTML = Prism.highlight(
      editor.textContent, 
      Prism.languages[lang], 
      lang
    );
  }
);

});