paginate

filter sort and paginate

This tailwind example is contributed by aditya_sharma, on 01-Sep-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author aditya_sharma

Tailwind v3.4 46

Fork Fullscreen

<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-3xl font-bold text-gray-900">Heading</h1>
    </div>
  </div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
    <div class="flex gap-16">
      
      <div class="flex-1 min-w-64">
        <label class="block text-sm font-semibold text-gray-700 mb-2">
          Search
        </label>

<div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">
          filter 1
        </label>

<select
          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        >
          <option value="">All</option>
          <option value="0">option a</option>
          <option value="1">option b</option>
          <option value="2">option c</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">
          filter 2
        </label>

<div
    class="px-6 py-4 border-t mt-4 border-gray-400 flex items-center justify-between"
  >
    <div class="text-sm text-gray-600">
      page
      
      of
      
    </div>

<div class="flex items-center gap-3">
      <button
        /* (click)="previousPage()"
        [disabled]="!hasPrevious() || loading()" */
        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        previous
      </button>
      <button
        /* (click)="nextPage()"
        [disabled]="!hasNext() || loading()" */
        class="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
      >
        next
      </button>
    </div>
  </div>
  
</div>

Related Examples

Banner Page
Community Banner section code

Sayista Yazdani

2 months ago

233
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

708
Sign Up Form
A premium responsive sign up page built with pure HTML and Tailwind CSS featuring a split layout, gradient background, social authentication buttons, password strength indicator, trust section, and polished SaaS-style design.

JUGENDRA GANGWAR

2 weeks ago

82
Product Grid Skeleton
Responsive product grid skeleton built with Tailwind CSS for e-commerce storefronts and online marketplaces. Features animated image placeholders, product titles, pricing, filter chips, and button placeholders.

JUGENDRA GANGWAR

4 days ago

10
Services

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.6k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Augustin

1 year ago

1.5k
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.2k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

KULDEEP

1 year ago

1.1k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k
Contact Us / Enquiry-form Responsive

KULDEEP

1 year ago

2.2k
htmlcss0

Anonymous

1 year ago

1.1k
button animation
button animation big

QQ-VVN

1 year ago

1.5k