Callouts: Transitioning from Foundation to Tailwind

Testing to see if we can stop using equalizer to force callouts to match heights per row and to make sure TW supports multiple button alignments.

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

Other

Author Sherry Lynne

Tailwind v3.4 190 1

Fork Fullscreen

<div class="font-light bg-white w-screen p-5">
  <h1 class="text-4xl lg:text-5xl my-2">Callouts</h1>
  <h2 class="text-2xl lg:text-3xl">Grid does not need equalizing javascript to match heights by rows.</h1>
  <div class="grid md:grid-cols-2 xl:grid-cols-3 place-items-stretch gap-5 my-5">
    <div class="bg-neutral-100 p-5 md:p-7 flex flex-col text-lg">
      <h2 class="text-2xl lg:text-3xl mb-2">Title</h2>
      <p class="flex-grow pb-2 test-base">Blurb with some text.</p>
      <p class="mt-3 place-self-end">
        <a class="px-6 py-3 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base" href="/a">CTA Link</a>
      </p>
    </div>
    <div class="bg-neutral-100 p-5 md:p-7 flex flex-col text-lg">
      <h2 class="text-2xl lg:text-3xl mb-2">Title of Item Two</h2>
      <p class="flex-grow pb-2 test-base">Blurb with some text that is longer to see how things wrap at different breakpoints.</p>
      <p class="mt-3 place-self-end">
        <a class="px-6 py-3 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base" href="/a">CTA Link 2</a>
      </p>
    </div>
    <div class="bg-neutral-100 p-5 md:p-7 flex flex-col text-lg">
      <h2 class="text-2xl lg:text-3xl mb-2">Title that is longer to see how things wrap at different breakpoints</h2>
      <p class="flex-grow pb-2 test-base">Blurb that is even longer, to show how things display when callouts and cards with differnet amounts of text wrap at different breakpoints.</p>
      <p class="mt-3 place-self-end">
        <a class="px-6 py-3 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base" href="/a">CTA Link 3</a>
      </p>
    </div>
  </div>
  <hr class="my-5">
  <h1 class="text-3xl font-bold">Whichever corner we agree on for button placement.</h1>
  <div class="grid md:grid-cols-2 xl:grid-cols-3 place-items-stretch gap-5 my-5">
    <div class="bg-neutral-100 p-5 md:p-7 flex flex-col text-lg">
      <h3 class="text-xl sm:text-2xl font-medium mb-2">Title</h3>
      <p class="flex-grow pb-2">Blurb with some text.</p>
      <p class="mt-3">
        <a class="px-6 py-3 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base" href="/a">CTA Link</a>
      </p>
    </div>
    <div class="bg-neutral-100 p-5 md:p-7 flex flex-col text-lg">
      <h3 class="text-xl sm:text-2xl font-medium mb-2">Title of Item Two</h3>
      <p class="flex-grow pb-2">Blurb with some text that is longer to see how things wrap at different breakpoints.</p>
      <p class="mt-3">
        <a class="px-6 py-3 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base" href="/a">CTA Link 2</a>
      </p>
    </div>
    <div class="bg-neutral-100 p-5 md:p-7 flex flex-col text-lg">
      <h3 class="text-xl sm:text-2xl font-medium mb-2">Title that is longer to see how things wrap at different breakpoints</h3>
      <p class="flex-grow pb-2">Blurb that is even longer, to show how things display when callouts and cards with differnet amounts of text wrap at different breakpoints.</p>
      <p class="mt-3">
        <a class="px-6 py-3 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base" href="/a">CTA Link 3</a>
      </p>
    </div>
  </div>
</div>

Related Examples

Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

10 months ago

788
3d element

Omer fils ELENGA

11 months ago

825
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Arjun Kumar

5 months ago

685
simple responsive blog layout with sidebar

Isabella Kowalski

3 years ago

10.5k
AI Orb For Voice To Voice

Hamza Atig

7 months ago

1k
Pixel Blast
Pixel Blast

Raul antonio de la cruz hernandez

1 year ago

1.4k
Interactive Order Report Chart with TailwindCSS and Chart.js
Create a stunning and interactive order report chart using HTML, TailwindCSS, and Chart.js. This chart combines bar and line graphs to visualize delivered, shipping, cancelled, and returned orders effectively. Perfect for dashboards and analytics pages with responsive design and clean aesthetics.

SHARIFUL ISLAM

1 year ago

2.5k
Horizon Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN

Alif Bima Pradana

8 months ago

984
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k
Contact Page

Sedat Kumcu

2 years ago

2.1k
products, show, items
display images, card, products

Rushikesh Latpate

9 months ago

888
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Ramkesh Gupta

1 year ago

1.1k