This repository has been archived on 2024-04-04. You can view files and clone it, but cannot push or open issues or pull requests.
tailwindui/react/components/application-ui/navigation/pagination/simple_card_footer.jsx
2024-01-24 19:02:44 +08:00

36 lines
1.4 KiB
JavaScript

const items = [
{ id: 1, title: 'Back End Developer', department: 'Engineering', type: 'Full-time', location: 'Remote' },
{ id: 2, title: 'Front End Developer', department: 'Engineering', type: 'Full-time', location: 'Remote' },
{ id: 3, title: 'User Interface Designer', department: 'Design', type: 'Full-time', location: 'Remote' },
]
export default function Example() {
return (
<nav
className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
aria-label="Pagination"
>
<div className="hidden sm:block">
<p className="text-sm text-gray-700">
Showing <span className="font-medium">1</span> to <span className="font-medium">10</span> of{' '}
<span className="font-medium">20</span> results
</p>
</div>
<div className="flex flex-1 justify-between sm:justify-end">
<a
href="#"
className="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0"
>
Previous
</a>
<a
href="#"
className="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0"
>
Next
</a>
</div>
</nav>
)
}