Tailwind CSS Pagination - Versoly UI

Added in 1.0

Example

<div class="btn-group pagination">
    <button class="btn btn-outline btn-primary btn-pagination">
        <i class="fas fa-angle-left"></i>
    </button>
    <button class="btn btn-outline btn-primary btn-pagination">1</button>
    <button class="btn btn-outline btn-primary btn-pagination" aria-current="page">2</button>
    <button class="btn btn-outline btn-primary btn-pagination">3</button>
    <button class="btn btn-outline btn-primary btn-pagination">4</button>
    <button class="btn btn-outline btn-primary btn-pagination">
        <i class="fas fa-angle-right"></i>
    </button>
</div>

No Numbers

<div class="btn-group pagination">
    <button class="btn btn-outline btn-primary btn-pagination">
        ← Newer
    </button>
    <button class="btn btn-outline btn-primary btn-pagination">
        Older →
    </button>
</div>

Ghost

<div class="btn-group pagination">
    <button class="btn btn-ghost btn-primary btn-pagination">
        <i class="fas fa-angle-left"></i>
    </button>
    <button class="btn btn-ghost btn-primary btn-pagination">1</button>
    <button class="btn btn-ghost btn-primary btn-pagination" aria-current="page">2</button>
    <button class="btn btn-ghost btn-primary btn-pagination">3</button>
    <button class="btn btn-ghost btn-primary btn-pagination">4</button>
    <button class="btn btn-ghost btn-primary btn-pagination">
        <i class="fas fa-angle-right"></i>
    </button>
</div>

Secondary

<div class="btn-group pagination">
    <button class="btn btn-outline btn-secondary btn-pagination">
        <i class="fas fa-angle-left"></i>
    </button>
    <button class="btn btn-outline btn-secondary btn-pagination">1</button>
    <button class="btn btn-outline btn-secondary btn-pagination" aria-current="page">2</button>
    <button class="btn btn-outline btn-secondary btn-pagination">3</button>
    <button class="btn btn-outline btn-secondary btn-pagination">4</button>
    <button class="btn btn-outline btn-secondary btn-pagination">
        <i class="fas fa-angle-right"></i>
    </button>
</div>

Secondary Ghost

<div class="btn-group pagination">
    <button class="btn btn-ghost btn-secondary btn-pagination">
        <i class="fas fa-angle-left"></i>
    </button>
    <button class="btn btn-ghost btn-secondary btn-pagination">1</button>
    <button class="btn btn-ghost btn-secondary btn-pagination" aria-current="page">2</button>
    <button class="btn btn-ghost btn-secondary btn-pagination">3</button>
    <button class="btn btn-ghost btn-secondary btn-pagination">4</button>
    <button class="btn btn-ghost btn-secondary btn-pagination">
        <i class="fas fa-angle-right"></i>
    </button>
</div>