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 41

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

LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
Table CRUD
CRUD TABLE DESIGN

Abhiraj

1 year ago

5k
Status Flow

Anonymous

3 weeks ago

60
Forgot password?
you can change password an time

gidy

1 year ago

1k
Marquee Slider of Client Logos – Smooth Scrolling Brand Showcase
Enhance your website's credibility with a sleek marquee slider displaying client logos. This continuously scrolling slider provides a dynamic and engaging way to showcase your trusted partnerships, ensuring a professional and visually appealing design. Perfect for businesses, portfolios, and service-based websites.

SANJAY SINGH GARIYA

1 year ago

2.3k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

2.9k
button animation
button animation big

QQ-VVN

1 year ago

1.5k
Flex and Flex-Col
วิธีการใช้ Flex และ Flex-Col

rawitsara.tr

1 year ago

1.2k
ServerHub Interface

МОЙДОЫР

10 months ago

1.3k
InfoWindow Mapy rzemieślników Desktop

Antoni Wierzba

3 months ago

113
Organization Hierarchy list

Anonymous

3 years ago

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