JSFiddle - React, Tailwind, and code Playground

HTML

<asp:DataList ID="Table1" runat="server" RepeatColumns="1" RepeatLayout="Table">
  <HeaderTemplate>
    <div class="Table">
      <div class="Heading">
          <div class="Cell">
             <p>Heading 1</p>
          </div>
          <div class="Cell">
             <p>Heading 2</p>
          </div>
          <div class="Cell">
             <p>Heading 3</p>
          </div>
          <div class="Cell">
             <p>Heading 4</p>
          </div>
         <div class="Cell">
             <p>Heading 5</p>
         </div>
         <div class="Cell">
             <p>Heading 6</p>
         </div>
         <div class="Cell">
             <p>Heading 7</p>
         </div>
       </div>
      </div>
</HeaderTemplate>
<ItemTemplate>                    
<div class="Row">
         <div class="Cell">
             <p>Row 1 Column 1</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 2</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 3</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 4</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 5</p>
         </div>
         <div class="Cell">
             <p>Row 1 Column 6</p>
         </div>
         <div class="Cell">
              <p>Row 1 Column 7</p>
         </div>
      </div>
</ItemTemplate>
</asp:DataList>

CSS

.Table
{
display: table;
    width:100% !important;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table;
    width:100% !important;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}