Display text or content through multiple columns.Example Effect#
Column 1
This is the content of column 1
Column 2
This is the content of column 2
Column 3
This is the content of column 3
<Columns>
<Column>
**Column 1**
This is the content of column 1
</Column>
<Column>
**Column 2**
This is the content of column 2
</Column>
<Column>
**Column 3**
This is the content of column 3
</Column>
</Columns>
The column content follows markdown syntax.Custom Styles#
The multi-column component supports customizing styles using TailwindCSS. Both Columns
and Column
can add TailwindCSS styles through the className
attribute.This photograph was captured by André Cook This photograph was captured by André Cook <Columns>
<Column className="bg-gray-100 p-3 rounded">
<p className="text-lg font-bold text-pink-500">
Photographs of scenery
</p>
This photograph was captured by André Cook

</Column>
<Column className="bg-gray-100 p-3 rounded">
<p class="text-lg font-bold text-orange-500">
Photographs of scenery
</p>
This photograph was captured by André Cook

</Column>
</Columns>