Cards with animated corners

This tailwind example is contributed by Anonymous, on 29-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 2

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

Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

KULDEEP

1 year ago

1.4k
Track Your Order
Track Your Order

Tanvir Hasan Bappy (Tanvir)

1 year ago

935
Customer support chatbox
Floating chatbox

gmer33

3 years ago

12.2k
random design

QQ-VVN

1 year ago

1.2k
carte visa black

Omer fils ELENGA

5 months ago

270
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

nejaa badr

1 year ago

2.4k
Native HTML Accordion
native html accordion summary details

Cristian

2 years ago

3k
Hero

ORGIN_DREAMS

1 year ago

2.2k
Responsive Multi-Step Registration
Responsive Multi-Step Registration

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.4k
Productivity Dashboard UI
A modern developer productivity dashboard built using HTML, Tailwind CSS, JavaScript, and Chart.js. Features a premium SaaS-style UI with analytics cards, interactive charts, kanban sprint board, developer management table, live search functionality, responsive layouts, activity feeds, and modern frontend components. Designed for frontend developers to showcase dashboard architecture, UI/UX skills, responsive design systems, and interactive web application interfaces. Includes glassmorphism styling, developer workflow management, team collaboration sections, and portfolio-ready dashboard components optimized for modern admin experiences.

Ayyamperumal S

5 months ago

599
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Ahita Bisma Adlula

1 year ago

4.2k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

2.7k