Cards with Animated Corner Arrow

Transitioning from Foundation to Tailwind - built cards and tiles to prove that we don't need javascript to reproduce our card and tile layouts/interactions.

This tailwind example is contributed by Sherry Lynne, on 16-Jul-2026. Component is made with Tailwind v3.4. It is responsive.

Card Grid

Author Sherry Lynne

Tailwind v3.4 283

Fork Fullscreen

<div class="bg-white font-sans font-light text-black flex w-full p-5">
  <div class="p-6 mx-auto max-w-7xl">
    <h1 class="text-4xl xl:text-5xl my-2">Cards with animated corner arrow on hover.</h1>
    <div class="grid md:grid-cols-2 xl:grid-cols-3 place-items-stretch gap-5 my-5">
      <a class="bg-neutral-100 flex flex-col text-sky-700 hover:text-sky-400 group text-base" href="/a">
        <div class="block items-stretch h-0 bg-cover pb-[75%] w-full bg-center bg-[url(https://placecats.com/360/262)]">
        </div>
        <div class="flex-grow p-5">
          <h3 class="text-xl md:text-2xl font-medium underline mb-2">Title</h3>
          <p class="text-black">Blurb with short text.</p>
        </div>
        <div class="px-5 pb-4">
          <div class="inline-block origin-top-left w-11 scale-x-[1.7] transform text-lg transition-transform duration-200 group-hover:scale-x-[3] group-focus:scale-x-[3]">
            &#10142;
          </div>
        </div>
      </a>
      <a class="bg-neutral-100 flex flex-col text-sky-700 hover:text-sky-400 group text-base" href="/b">
        <div class="block items-stretch h-0 bg-cover pb-[75%] w-full bg-center bg-[url(https://placecats.com/360/262)]">
        </div>
        <div class="flex-grow p-5 ">
          <h3 class="text-xl md:text-2xl font-medium underline mb-2">Title of Item Two</h3>
          <p class="text-black">Blurb with some text that is longer to see how things wrap at different breakpoints.</p>
        </div>
        <div class="px-5 pb-4">
          <div class="inline-block origin-top-left w-11 scale-x-[1.7] transform text-lg transition-transform duration-200 group-hover:scale-x-[3] group-focus:scale-x-[3]">
            &#10142;
          </div>
        </div>
      </a>
      <a class="bg-neutral-100 flex flex-col text-sky-700 hover:text-sky-400 group text-base" href="/c">
        <div class="block items-stretch h-0 bg-cover pb-[75%] w-full bg-center bg-[url(https://placecats.com/360/262)]">
        </div>
        <div class="flex-grow p-5">
          <h3 class="text-xl md:text-2xl font-medium underline mb-2">Title that is longer to see how things wrap at different breakpoints</h3>
          <p class="text-black">Blurb that is even longer, to show how things display when callouts and cards with differnet amounts of text wrap at different breakpoints.</p>   
        </div>
        <div class="px-5 pb-4">
          <div class="inline-block origin-top-left w-11 scale-x-[1.7] transform text-lg transition-transform duration-200 group-hover:scale-x-[3] group-focus:scale-x-[3]">
            &#10142;
          </div>
        </div>
      </a>
    </div>
    <hr class="my-5">
    <h2 class="text-2xl lg:text-3xl">Tiles with animated corner arrow on hover.</h2>
    <div class="grid md:grid-cols-2 xl:grid-cols-3 place-items-stretch gap-5 my-5">
      <a class="bg-neutral-100 flex flex-col text-sky-700 hover:text-sky-400 group text-base" href="/a">
        <div class="flex-grow p-5">
          <h3 class="text-xl md:text-2xl font-medium underline mb-2">Title</h3>
          <p class="text-black">Blurb with some text.</p>
        </div>
        <div class="px-5 pb-4">
          <div class="inline-block origin-top-left w-11 scale-x-[1.7] transform text-lg transition-transform duration-200 group-hover:scale-x-[3] group-focus:scale-x-[3]">
            &#10142;
          </div>
        </div>
      </a>
      <a class="bg-neutral-100 flex flex-col text-sky-700 hover:text-sky-400 group text-base" href="/b">
        <div class="flex-grow p-5 ">
          <h3 class="text-xl md:text-2xl font-medium underline mb-2">Title of Item Two</h3>
          <p class="text-black">Blurb with some text that is longer to see how things wrap at different breakpoints.</p>
        </div>
        <div class="px-5 pb-4">
          <div class="inline-block origin-top-left w-11 scale-x-[1.7] transform text-lg transition-transform duration-200 group-hover:scale-x-[3] group-focus:scale-x-[3]">
            &#10142;
          </div>
        </div>
      </a>
      <a class="bg-neutral-100 flex flex-col text-sky-700 hover:text-sky-400 group text-base" href="/c">
        <div class="flex-grow p-5 ">
          <h3 class="text-xl md:text-2xl font-medium underline mb-2">Title that is longer to see how things wrap at different breakpoints</h3>
          <p class="text-black">Blurb that is even longer, to show how things display when callouts and cards with differnet amounts of text wrap at different breakpoints.</p>   
        </div>
        <div class="px-5 pb-4">
          <div class="inline-block origin-top-left w-11 scale-x-[1.7] transform text-lg transition-transform duration-200 group-hover:scale-x-[3] group-focus:scale-x-[3]">
            &#10142;
          </div>
        </div>
      </a>
    </div>
  </div>
</div>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.7k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.1k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k