Semantic TCard (and others)

[iBobik]

Curently it produces non-semantic HTML:

<div class="border bg-white border-gray-200 rounded-2 shadow-sm ">
  <div class="border-b p-3 rounded-t border-gray-100">User profile</div>
  <div class="p-3 ">
      Im a full-stack software from Mexico City that likes Vue &amp; TailwindCSS.
  </div>
  <div class="border-t p-3 rounded-b border-gray-100">Copyright wharever 2020</div>
</div>

But I would like to have it better readable by screen readers and search engines, so better markup would be:

<aside class="border bg-white border-gray-200 rounded-2 shadow-sm ">
  <h2 class="border-b p-3 rounded-t border-gray-100">User profile</h2>
  <div class="p-3 ">
      Im a full-stack software from Mexico City that likes Vue &amp; TailwindCSS.
  </div>
  <footer class="border-t p-3 rounded-b border-gray-100">Copyright wharever 2020</footer>
</aside>

I am not sure if it is good idea to make it default, but it definitely be useful to have it configurable by props.

Is PR welcome?