JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-12" id="invoice">
  <div class="row">
    <div class="col">

      <p>My Name</p>
      <p>My Email</p>
      <p>My Address</p>
    </div>
    <div class="col">
      <h6>Number</h6>
      <br />
      <p>2021</p>
      <br />
      <h6>Another Number</h6>
      <br />
      <p>2021</p>
    </div>
    <div class="col">
      <h6>Date</h6>
      <br />
      <p>9/14/2021</p>
      <br />
      <h6>Terms</h6>
      <br />
      <p>30</p>
    </div>
  </div>


  <table class="table-bordered">
    <thead>
      <tr>
        <th>th1</th>
        <th>th2</th>
        <th>th3</th>
        <th>th4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          content1
        </td>
        <td>
          content2
        </td>
        <td>
          content3
        </td>
        <td>
          content4
        </td>

      </tr>
    </tbody>

  </table>

</div>

JavaScript

function downloadMyElement() {
  var MyElement = document.getElementById('invoice').innerHTML;
  console.log(MyElement);
  var filename = "MyElement.html";
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(MyElement));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);

}
downloadMyElement();