<div class="pagination-wrapper">
<a href="#" class="page-link prev">‹</a>
<a href="#" class="page-link active">1</a>
<a href="#" class="page-link">2</a>
<a href="#" class="page-link">3</a>
<span class="dots">...</span>
<a href="#" class="page-link">12</a>
<a href="#" class="page-link next">›</a>
</div>
.pagination-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
align-items: center;
gap: 8px;
}
.page-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #4b5563;
border-radius: 8px;
font-weight: 500;
transition: all 0.2s;
background: #fff;
border: 1px solid #e5e7eb;
}
.page-link:hover {
background: #f3f4f6;
border-color: #d1d5db;
}
.page-link.active {
background: #2563eb;
color: white;
border-color: #2563eb;
}
.dots {
color: #9ca3af;
padding: 0 5px;
}