Divider
Provides a new utility class divider
so you can easily separate content.
Examples
Basic
html
<div class="flex-col gap-4">
<div class="flex-center">
<button class="ui-btn accent-main flex-grow">Register</button>
<button class="ui-btn flex-grow">Login</button>
</div>
<div class="divider">OR</div>
<div class="flex-center">
<button class="ui-btn muted flex-grow">Facebook</button>
<button class="ui-btn muted flex-grow">Google</button>
<button class="ui-btn muted flex-grow">Apple</button>
</div>
</div>
Vertical
html
<div class="flex gap-4">
<div class="flex-col gap-2">
<button class="ui-btn accent-main flex-grow">Register</button>
<button class="ui-btn flex-grow">Login</button>
</div>
<div class="divider flex-col">OR</div>
<div class="flex-col gap-2">
<button class="ui-btn muted flex-grow">Facebook</button>
<button class="ui-btn muted flex-grow">Google</button>
<button class="ui-btn muted flex-grow">Apple</button>
</div>
</div>
Custom
html
<div class="flex-col gap-4">
<div class="flex-center">
<button class="ui-btn accent-main flex-grow">Register</button>
<button class="ui-btn flex-grow">Login</button>
</div>
<div class="divider before:hidden after:border-dashed border-opacity-100 accent-primary">OR</div>
<div class="flex-center">
<button class="ui-btn muted flex-grow">Facebook</button>
<button class="ui-btn muted flex-grow">Google</button>
<button class="ui-btn muted flex-grow">Apple</button>
</div>
</div>