Tailwind Table Generator

Table Layout & Size

Table Properties

Colors

Text Properties

Preview

Header 1Header 2Header 3
Cell 1-1Cell 1-2Cell 1-3
Cell 2-1Cell 2-2Cell 2-3

Generate HTML + Tailwind


<div class="relative overflow-hidden shadow-md rounded-lg">
  <table class="table-fixed w-full text-left rounded-lg overflow-hidden border-collapse">
    <thead class="uppercase font-bold bg-[#6b7280] text-[#e5e7eb]" style="background-color: #6b7280; color: #e5e7eb;">
      <tr>
        <td class="py-1 border text-center p-4" contenteditable="true">Header 1</td><td class="py-1 border text-center p-4" contenteditable="true">Header 2</td><td class="py-1 border text-center p-4" contenteditable="true">Header 3</td>
      </tr>
    </thead>
    <tbody class="bg-[#FFFFFF] text-[#6b7280]" style="background-color: #FFFFFF; color: #6b7280;">
      
      <tr>
        <td class="py-5 border text-center p-4" contenteditable="true">Cell 1-1</td><td class="py-5 border text-center p-4" contenteditable="true">Cell 1-2</td><td class="py-5 border text-center p-4" contenteditable="true">Cell 1-3</td>
      </tr>
      
      <tr>
        <td class="py-5 border text-center p-4" contenteditable="true">Cell 2-1</td><td class="py-5 border text-center p-4" contenteditable="true">Cell 2-2</td><td class="py-5 border text-center p-4" contenteditable="true">Cell 2-3</td>
      </tr>
      
    </tbody>
  </table>
</div>