Component / Code

html

<script src="https://cdn.tailwindcss.com"></script>
<div class="min-h-screen bg-gray-800 py-6 px-8
flex flex-col justify-center relative overflow-hidden items-center sm:py-12
dark:bg-gray-700 ">

  <!-- Component: -->
  <div id="component" class="">
    <p class="px-8 text-center py-2  bg-green-500 text-white 
              dark:bg-green-50 dark:text-green-900
              font-medium text-lg rounded-md 
              hover:scale-105 hover:bg-green-100
              ">
      Start Now
    </p>
  </div>

  <!-- Code: -->

  <div class="px-8 my-8 relative space-y-4">
      <h1 class="text-white ">Code:</h1>
    <p class="bg-gray-900 rounded-sm px-4">
      <code class="text-white px-4 py-2  whitespace-pre" id="code">
      </code>
    </p>
    <p class="text-white absolute bottom-5 right-10 px-2 py-0.5 bg-gray-700 rounded-md hover:scale-105 hover:bg-gray-500 cursor-pointer">Copy</p>
  </div>
</div>

js

const component = document.getElementById("component")
const code = document.querySelector("#code")

code.innerText =component.innerHTML;