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 135

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

Growing Navigation Menu with Tailwind CSS
PREVIEW ON FULL SCREEN BECAUSE INSIDE THE NAV BAR IT CONTAINS (aria-current="page") which create some issues inside canvas. A clean and minimal vertical navigation menu built with Tailwind CSS featuring smooth line expansion, hover interactions, and active link highlighting. The component uses lightweight CSS transitions with aria-current support for accessible active states, making it ideal for documentation websites, portfolios, dashboards, and landing pages.

Arshid Iqbal

2 months ago

232
omerlinks Calendrier Glassmorphism
omerlinks Calendrier Glassmorphism

Omer fils ELENGA

8 months ago

831
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Augustin

1 year ago

1.5k
Heading Style

KULDEEP

1 year ago

763
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Bruz

1 year ago

783
Author Panels

Sherry Lynne

4 weeks ago

18
pages / slides

MD Fardous Alom

1 year ago

2.2k
image

pablitodgb

1 year ago

878
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

1.2k
background animation
background animation

Anonymous

3 years ago

53k
Sign up
sign up page

gidy

1 year ago

2k