JSFiddle - React, Tailwind, and code Playground

HTML

<div class="report">
    <div class="top">
      <h1>參加2021第31屆成都世界大學運動會<span>出國報告</span></h1>
    </div>
    <div class="material">
      <p>詮釋資料</p>
      <table>
        <tr>
          <th>主類分類</th>
          <td>教育</td>
        </tr>
        <tr>
          <th>數位部服務分類</th>
          <td>求學及進修</td>
        </tr>
        <tr>
          <th>資料及研究(主辦)機關</th>
          <td>教育部 台北市大</td>
        </tr>
        <tr>
          <th>出國類型</th>
          <td>其他</td>
        </tr>
        <tr>
          <th>出國期間</th>
          <td>2023-07-25至2023-08-08</td>
        </tr>
        <tr>
          <th>前往地區</th>
          <td>中國大陸</td>
        </tr>
        <tr>
          <th>考察單位</th>
          <td>台北市立大學</td>
        </tr>
        <tr>
          <th valign="top">出國人員</th>
          <td>
            <table class="text_1" cellspacing="0">
              <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>服務機關</th>
                <th>職稱</th>
              </tr>
              <tr>
                <td width="100" >1</td>
                <td>何國龍</td>
                <td>臺北市立大學</td>
                <td>副教授</td>
              </tr>
              <tr>
                <td>2</td>
                <td>廖偉喆</td>
                <td>臺北市立大學</td>
                <td>助理教授</td>
              </tr>
              <tr>
                <td>3</td>
                <td>鄧衍敏</td>
                <td>臺北市立大學</td>
                <td>講師</td>
              </tr>
              <tr>
                <td>4</td>
                <td>許至傑</td>
                <td>臺北市立大學</td>
                <td>助理教授</td>
              </tr>
              <tr>
                <td>5</td>
                <td>邱英浩</td>
                <td>臺北市立大學</td>
                <td>校長</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>  
    </div>
  </div>

CSS

* {
      font-family:微軟正黑體;
      /* border: solid 1px */
    }
    html,body{
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color:	#F0F0F0;
      display: flex;
      justify-content: center;
    }
    h1 {
      position: relative;
    }
    span {
      display: inline-block;
      font-size: 12px;
      position: absolute;
      top: 6px;
      padding: 7px;
      border-radius: 14%;
      left: 535px;
      border: solid 1px;
    }
    .material table th {
      width: 250px;
      padding: 10px 5px;
      text-align: right;
      background-color: #2eb6c7;
      color: #fff;
    }
    .material table td {
      width: 500px;
      padding: 0px 10px 0px 10px;
    }
    .left {
      text-align: left;
    }
    p {
      padding: 10px 0px 10px 10px;
      margin: 0px;
    }
    .report {
      position: absolute;
      background-color: #fff;
    }
    .text_1 {
      border: solid 1px;
      margin: 5px 0px 5px 0px; 
    }
    .text_1 td {
      border: solid 1px;
    }