Logo TA Pagination

A light-weight (6,5kB), responsive and mobile first content, article and product pagination based on Tailwind CSS and Alpine JS.

Move Flip Room Snake Swipe Window

(Choose your favorite animation style and see the magic happening.)

Snippet TA-Pagination

Like in the article example I wasn’t using the pagination__item class. I used Tailwind CSS to design the elements and changed the breakpoint to be consistent with the breakpoints Tailwind CSS is using.

    <!-- pagination wrapper -->
<div class="relative mt-6 hidden bg-white sm:rounded-md px-24 py-12"
    page: 1,
    pagination: 3,
    breakpoints: [
      {width:'640',pagination: '1'},
      {width: '1024', pagination:'2'}
    :class="{'grid': initialized, 'hidden': !initialized}">
    <!-- content comes here -->
    <!-- single content element -->
<div class="pagination__anim average-height leading-normal flex flex-col bg-white border border-gray-200 rounded-xl p-4 shadow-md pagination__item--visible">
  <div class="relative rounded-t-xl rounded-b-sm border border-white border-opacity-50 overflow-hidden w-full h-32">
    <img src="https://picsum.photos//320/240?random=0" alt="Unus lorem ipsum dolor" class="block absolute inset-0 h-full w-full object-cover object-center" title="Image Title">
  <div class="text-center py-4">
    <h2 class="text-xl font-medium text-pink-800">Unus lorem ipsum dolor</h2>
    <p class="text-sm font-normal max-w-text">Sit amet consectetur adipisicing elit. Recusandae fugit assumenda repellat alias eligendi quos, maxime sapiente voluptate ratione quo nisi ad autem quis nam repellendus dolores. Tempora, provident error!</p>
    <a href="#" class="inline-block leading-none uppercase text-base font-semibold text-pink-800 bg-white border border-pink-800 rounded-md shadow-md px-6 py-2 hover:text-white hover:bg-pink-800 transition duration-500 ease-in-out mt-6">more</a>

Copyright © 2019-2020 Markus A. Wolf - www.markusantonwolf.com


TA-Pagination is licensed under the MIT license, see LICENSE for details.