is now part of Shuffle™. The new editor includes templates for Tailwind CSS, Bootstrap, Bulma, and Material-UI.
Switch to Shuffle →
← Tailwind CSS classes list

Tailwind CSS class: .table

<div class="bg-gray-400 p-2 table">
  <div class="table-caption">Description</div>
  <div class="table-header-group">
    <div class="table-cell bg-teal-400">One Header</div>
    <div class="table-cell bg-teal-400">Two Header</div>
  </div>
  <div class="table-column-group">
    <div class="table-colum bg-teal-400">One Column</div>
    <div class="table-colum bg-teal-400">Two Column</div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell bg-teal-400">One Data</div>
      <div class="table-cell bg-teal-400">Two Data</div>
    </div>
    <div class="table-row">
      <div class="table-cell bg-teal-400">One Data</div>
      <div class="table-cell bg-teal-400">Two Data</div>
    </div>
  </div>
  <div class="table-footer-group">
    <div class="table-cell bg-teal-400">One Footer</div>
    <div class="table-cell bg-teal-400">One Footer</div>
  </div>
</div>

Preview

Description
One Header
Two Header
One Column
Two Column
One Data
Two Data
One Data
Two Data

Check .table in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

CSS source

.table {
    display: table;
}

More in Tailwind CSS Table