JSFiddle - React, Tailwind, and code Playground

by Slava Slava

HTML

<article class="article-block" id="m-variant-3">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h4>Варіант 2</h4>
						<p>Блоки з кодом і скріншотами можна встроювати в сітку <em>"Bootstrap"</em>.</p>
						<div class="block-code-scr-col">
							
							<div class="col-md-5 col-sm-5">
								<!--  -->
								<div class="code-wrapper">
									<button class="copy-btn">Copy</button>
									<div class="code-block">
										<!-- CODE -->
										<pre class="copied"><ol class="linenums"><li class="L0"><span class="com">&lt;!-- Загальний блок, в який вставляється сітка --&gt;</span></li><li class="L1"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"block-code-scr-col"</span><span class="tag">&gt;</span></li><li class="L2"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-5 col-sm-5"</span><span class="tag">&gt;</span></li><li class="L3"><span class="pln">    </span><span class="com">&lt;!-- Блок з кодом --&gt;</span></li><li class="L4"><span class="pln">    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"code-wrapper"</span><span class="tag">&gt;</span></li><li class="L5"><span class="pln">      </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"copy-btn"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"copyBtn6"</span><span class="tag">&gt;</span><span class="pln">Copy</span><span class="tag">&lt;/button&gt;</span></li><li class="L6"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span...