JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<html class="bg-base-300">

    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=devide-width, initial-scale=1.0" />
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
      <script src="https://cdn.tailwindcss.com"></script>
    </head>

    <body class="m-0 p-0 h-screen bg-base-300">

      <div class="bg-base-200 flex justify-center ">

        <div class="mockup-code m-24 border  bg-primary text-primary-content">
          <pre data-prefix="$"><code>logokit --version</code></pre>
          <pre data-prefix=">"><code>Usage: logokit [format] [options] </code></pre>
          <pre data-prefix=">"><code> </code></pre>
          <pre data-prefix=">"><code>  Formats:</code></pre>
          <pre data-prefix=">"><code> </code></pre>
          <pre data-prefix=">"><code>  pdf .................... Download assets as multipage PDF.</code></pre>
          <pre data-prefix=">"><code>  zip .................... Download assets as zip archive.</code></pre>
          <pre data-prefix=">"><code>  png .................... Download single asset as PNG file.</code></pre>
          <pre data-prefix=">"><code> </code></pre>
          <pre data-prefix=">"><code>Detailed documentation see: <a href="/docs">/docs</a></code></pre>
          <pre data-prefix=">"><code>Version 2.0.0</code></pre>
          <pre data-prefix=">"><code> </code></pre>
          <pre data-prefix=">"><code>💚 by natureOffice</code></pre>
        </div>


      </div>

    </body>

  </html>