JSFiddle - React, Tailwind, and code Playground

HTML

<style>
    div {
      margin-top: 10px;
      margin-bottom:10px
    }
  </style>
  
  <span>
      <div style="background-color: lightgreen">this is fine even with a span</div>
  </span>
  
  <div style="background-color: lightgreen">
    yeah margin as expected
  </div>
  
  
  <table style="width: 100%;">
      <tbody>
          <td>
              <div style="background-color: red">this is shit - above me is twice the margin, below me as well</div>
          </td>
      </tbody>
    </table>
  
  <div style="background-color: red">
    Why do I have twice the margin i expect?
  </div>