Divider

Provides a new utility class divider so you can easily separate content.

View Source 

Examples

Basic

<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

<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

<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>