Table

<table class="t1 t1-start table w-full color-text"> <tr class="t1"> <td class="t1 px-8 py-4 b-1-gray-150"> Foo </td> <td class="t1 px-8 py-4 b-1-gray-150"> Lorem ipsum dolor sit amet. </td> <td class="t1 px-8 py-4 b-1-gray-150"> Fusce nec tellus. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 b-1-gray-150"> Bar </td> <td class="t1 px-8 py-4 b-1-gray-150"> Nullam in quam ut massa. </td> <td class="t1 px-8 py-4 b-1-gray-150"> Class aptent taciti. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 b-1-gray-150"> Baz </td> <td class="t1 px-8 py-4 b-1-gray-150"> Duis sagittis ipsum. </td> <td class="t1 px-8 py-4 b-1-gray-150"> Curabitur sodales. </td> </tr> </table>

<table class="t1 t1-start table w-full color-text"> <thead class="t1"> <tr class="t1"> <th class="t1 px-8 py-4 b-1-gray-150 text-left"> One </th> <th class="t1 px-8 py-4 b-1-gray-150 text-left"> Two </th> <th class="t1 px-8 py-4 b-1-gray-150 text-left"> Three </th> </tr> </thead> <tbody class="t1"> <tr class="t1"> <td class="t1 px-8 py-4 b-1-gray-150"> Foo </td> <td class="t1 px-8 py-4 b-1-gray-150"> Lorem ipsum dolor sit amet. </td> <td class="t1 px-8 py-4 b-1-gray-150"> Fusce nec tellus. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 b-1-gray-150"> Bar </td> <td class="t1 px-8 py-4 b-1-gray-150"> Nullam in quam ut massa. </td> <td class="t1 px-8 py-4 b-1-gray-150"> Class aptent taciti. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 b-1-gray-150"> Baz </td> <td class="t1 px-8 py-4 b-1-gray-150"> Duis sagittis ipsum. </td> <td class="t1 px-8 py-4 b-1-gray-150"> Curabitur sodales. </td> </tr> </tbody> </table>

<table class="t1 t1-start table w-full color-text"> <thead class="t1"> <tr class="t1"> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> One </th> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> Two </th> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> Three </th> </tr> </thead> <tbody class="t1"> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150"> Foo </td> <td class="t1 px-8 py-4 by-1-gray-150"> Lorem ipsum dolor sit amet. </td> <td class="t1 px-8 py-4 by-1-gray-150"> Fusce nec tellus. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150"> Bar </td> <td class="t1 px-8 py-4 by-1-gray-150"> Nullam in quam ut massa. </td> <td class="t1 px-8 py-4 by-1-gray-150"> Class aptent taciti. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150"> Baz </td> <td class="t1 px-8 py-4 by-1-gray-150"> Duis sagittis ipsum. </td> <td class="t1 px-8 py-4 by-1-gray-150"> Curabitur sodales. </td> </tr> </tbody> </table>

<table class="t1 t1-start table w-full color-text"> <thead class="t1"> <tr class="t1 bg-c-gray-750 color-white"> <th class="t1 px-8 py-4 text-left"> One </th> <th class="t1 px-8 py-4 text-left"> Two </th> <th class="t1 px-8 py-4 text-left"> Three </th> </tr> </thead> <tbody class="t1"> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150"> Foo </td> <td class="t1 px-8 py-4 by-1-gray-150"> Lorem ipsum dolor sit amet. </td> <td class="t1 px-8 py-4 by-1-gray-150"> Fusce nec tellus. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150"> Bar </td> <td class="t1 px-8 py-4 by-1-gray-150"> Nullam in quam ut massa. </td> <td class="t1 px-8 py-4 by-1-gray-150"> Class aptent taciti. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150"> Baz </td> <td class="t1 px-8 py-4 by-1-gray-150"> Duis sagittis ipsum. </td> <td class="t1 px-8 py-4 by-1-gray-150"> Curabitur sodales. </td> </tr> </tbody> </table>

<table class="t1 t1-start table w-full color-text"> <thead class="t1"> <tr class="t1"> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> One </th> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> Two </th> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> Three </th> </tr> </thead> <tbody class="t1"> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Foo </td> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Lorem ipsum dolor sit amet. </td> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Fusce nec tellus. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Bar </td> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Nullam in quam ut massa. </td> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Class aptent taciti. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Baz </td> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Duis sagittis ipsum. </td> <td class="t1 px-8 py-4 by-1-gray-150 odd:/bg-c-gray-50"> Curabitur sodales. </td> </tr> </tbody> </table>

<table class="t1 t1-start table w-full color-text"> <thead class="t1"> <tr class="t1"> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> One </th> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> Two </th> <th class="t1 px-8 py-4 bb-1-gray-500 text-left"> Three </th> </tr> </thead> <tbody class="t1"> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Foo </td> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Lorem ipsum dolor sit amet. </td> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Fusce nec tellus. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Bar </td> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Nullam in quam ut massa. </td> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Class aptent taciti. </td> </tr> <tr class="t1"> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Baz </td> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Duis sagittis ipsum. </td> <td class="t1 px-8 py-4 by-1-gray-150 hover:/bg-c-gray-50"> Curabitur sodales. </td> </tr> </tbody> </table>