Divider
Divider Default
=
<hr class="my-8 h-px border-0 bg-gray-300" />
Divider With text
=
<div class="my-8 flex items-center gap-4 before:h-px before:flex-1 before:bg-gray-300 before:content-[''] after:h-px after:flex-1 after:bg-gray-300 after:content-['']">More</div>
Divider With left text
=
<div class="my-8 flex items-center gap-4 after:h-px after:flex-1 after:bg-gray-300 after:content-['']">More</div>
Divider With right text
=
<div class="my-8 flex items-center gap-4 before:h-px before:flex-1 before:bg-gray-300 before:content-['']">More</div>
Divider With button
=
<div class="fter:h-px my-8 flex items-center before:h-px before:flex-1 before:bg-gray-300 before:content-[''] after:h-px after:flex-1 after:bg-gray-300 after:content-['']">
<button type="button" class="flex items-center rounded-full border border-gray-300 bg-secondary-50 px-3 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-4 w-4">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
More button
</button>
</div>
Divider Short
=
<hr class="mx-auto my-8 h-1 w-60 border-0 bg-gray-100" />
总共 6 条记录