JSFiddle - React, Tailwind, and code Playground

by Viktor L

HTML

<div class="info">
						<div class="code-editor">
						  <div class="code-editor__head">
								<div class="nav-window">
									<span class="close"></span>
									<span class="turn"></span>
									<span class="expande"></span>
								</div>
								<div class="nav-btn">
									<span class="copy">
										Copy
									</span>
									<div class="state">
										<span class="def active">Default</span>
										<span class="exp">Expand</span>
										<span class="collapse">Collapse</span>
									</div>
								</div>
							</div>
							<div class="code-editor__body">
								<div class="column" id="c">
                  <span>1</span>
								</div>
								<code class="rainbow-show">
                 
                </code>
                <div class="hide-text" style="display: none">
                <pre><span>"Recipients": [</span><br> <span>  {</span><br> <span>      "AccountHolder": {},</span><br> <span class="active">      "Amount": 1734.58,</span><br> <span>      "ClientPaymentAccountReferenceId": "string",</span><br> <span>      "PaymentAccountId": 0,</span><br> <span>      "SecurityQuestions": [],</span><br> <span>      "Token": {}</span><br> <span>  }</span><br> <span>],</span></pre>
                </div>
							</div>
						</div>
					</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap');

.code-editor {
    background: #1F2937;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    margin-top: 30px;
}

.code-editor .code-editor__head {
    border-bottom: 1px solid #374151;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.code-editor .code-editor__head .nav-btn {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.code-editor .code-editor__head .nav-btn span {
    border-radius: 6px;
    padding: 4px 8px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0em;
    cursor: pointer;
}

.code-editor .code-editor__head .nav-btn .state {
    border-left: 1px solid #374151;
    margin-left: 16px;
    padding-left: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-editor .code-editor__head .nav-btn .state span {
    margin-right: 6px;
}

.code-editor .code-editor__head .nav-btn .state span:last-child {
    margin: 0;
}

.code-editor .code-editor__head .nav-btn .state span.active {
    background: #374151;
}

.code-editor .code-editor__head .nav-btn .copy {
    background: #374151;
}

.code-editor .code-editor__head .nav-window {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.code-editor .code-editor__head .nav-window span {
    width: 12px;
    height: 12px;
    border: 2px solid;
    border-radius: 50%;
    margin-right: 6px;
    cursor: pointer;
}

.code-editor .code-editor__head .nav-window span:last-child {
    margin-right: 0;
}

.code-editor .code-editor__head .nav-window .close {
    border-color: #DE524C;
}

.code-editor .code-editor__head .nav-window .turn {
    border-color:...

JavaScript

var block_show = false;
var e = document.querySelector(".hide-text");
var column = document.querySelector(".column");
var content = e.innerHTML;
const len = content.split('br').length;
var str = content,
  i = 0,
  isTag,
  text;

/*for (let i = 2; i <= len+1; i++) {
	let span = document.createElement('span');
	span.innerHTML += i;
	column.appendChild(span);
}*/
column.innerHTML = Array(len+1).fill(0).map((_,i)=>`<span>${i+1}</span>`).join('');


block_show = true;

(function type() {
  text = str.slice(0, ++i);
  if (text === str) return;

  document.querySelector('code').innerHTML = text;

  var char = text.slice(-1);
  if (char === '<') isTag = true;
  if (char === '>') isTag = false;

  if (isTag) return type();
  setTimeout(type, 25);
}());
e.parentNode.removeChild(e);