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.)

Articles TA-Pagination

The article layout is a great way to show the possibilities of the TA-Pagination. Even if you don’t use pagination__item the script falls back to a different approach. If there are no tags with the default items class name then it will use the children of the content element. This means you can just skip defining pagination__item and rely on the “fallback” so every children tag will be used - e.g. <div>.

    <!-- single content element -->
<div class="pagination__anim average-height leading-normal grid grid-cols-4 grid-rows-2 col-gap-4 text-4xl overflow-hidden py-2 md:grid-rows-1 md:col-gap-8 pagination__item--visible">
  <div class="relative col-span-4 md:col-span-1 rounded-lg shadow-md border border-white border-opacity-50 overflow-hidden">
    <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="col-span-4 md:col-span-3">
    <h2 class="text-2xl font-medium text-pink-800">Unus lorem ipsum dolor</h2>
    <p class="text-base 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">more</a>

To get the evenly height I defined a utility named average-height.

    .average-height {
  height: var(--content-height);

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


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