JSFiddle - React, Tailwind, and code Playground

by Nicholas Berlette

HTML

<section class="m-10 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">
<div class="flex flex-col justify-center">
<div class="rounded-lg bg-secondary dark:bg-gray-50 h-full">
<div class="bg-gray-90 dark:bg-gray-60 w-full rounded-t-lg">
<div class="text-primary-dark dark:text-primary-dark flex text-sm px-4 py-0.5 relative justify-between">
<div>
<svg
class="inline-flex mr-2 self-center"
width="1em"
height="1em"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.40299 2.61279H14.403C14.5798 2.61279 14.7494 2.68303 14.8744 2.80806C14.9994 2.93308 15.0697 3.10265 15.0697 3.27946V13.9461C15.0697 14.1229 14.9994 14.2925 14.8744 14.4175C14.7494 14.5426 14.5798 14.6128 14.403 14.6128H2.40299C2.22618 14.6128 2.05661 14.5426 1.93159 14.4175C1.80657 14.2925 1.73633 14.1229 1.73633 13.9461V3.27946C1.73633 3.10265 1.80657 2.93308 1.93159 2.80806C2.05661 2.68303 2.22618 2.61279 2.40299 2.61279ZM8.403 10.6128V11.9461H12.403V10.6128H8.403ZM6.01233 8.61279L4.12699 10.4981L5.06966 11.4415L7.89833 8.61279L5.06966 5.78413L4.12699 6.72746L6.01233 8.61279Z"
fill="currentColor"
/>
</svg>
Terminal
</div>
<div>
<clipboard-copy for="code" class="btn w-full text-left text-primary-dark dark:text-primary-dark px-3 pb-0.5 pt-1.5 cursor-pointer hover:shadow transition-all duration-500 rounded-full bg-yellow-50 border border-b-2 border-gray-100 border-gray-500 text-xs shadow-sm" style="border-bottom:5px solid #0001;border-top-color:#dedede;border-left-color:#dedede;border-right-color:#dedede;">Copy</clipboard-copy>
</div>
</div>
</div>
<div class="px-8 pt-4 pb-6 text-primary-dark dark:text-primary-dark font-mono text-code whitespace-pre">
npm install react
</div>
</div>
</div>
<div class="flex flex-col justify-center"><div
translate="no"
class="rounded-xl h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-100 shadow-xl"
>
<div class="sp-wrapper sp-sp-607024663">
<div class="sp-stack">
<pre class="sp-cm sp-pristine sp-javascript"...