card2

This tailwind example is contributed by pablitodgb, on 24-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Blog Card

Author pablitodgb

Fork Fullscreen

<div class="h-screen w-screen box-content bg-slate-300 text-slate-600 flex justify-center dark:bg-slate-600 dark:text-slate-200">
  <div class="p-1 my-auto min-h-fit h-fit max-h-screen w-full max-w-screen grid grid-cols-1 sm:grid-cols-3 gap-4 rounded-lg bg-slate-500">
    
    <div class="p-1 m-1 rounded-lg text-center min-h-20 h-fit max-w-sm bg-slate-400">
      <main class="text-3xl relative -top-5 shadow shadow-lg shadow-cyan-500/50">😊</main>
      <section class="space-y-2">
        <p class="font-semibold text-xl">TREE AND SHRUB PRUNING</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo iure inventore amet modi accusantium vero perspiciatis, incidunt dicta sed aspernatur!</p>
      </section>
    </div>

<div class="p-1 m-1 rounded-lg text-center min-h-20 h-fit max-w-sm bg-slate-400">
      <main class="text-3xl relative -top-5">😁</main>
      <section class="space-y-2">
        <p class="font-semibold text-xl">TREE AND SHRUB PRUNING</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo iure inventore amet modi accusantium vero perspiciatis, incidunt dicta sed aspernatur!</p>
      </section>
    </div>

<div class="p-1 m-1 rounded-lg text-center min-h-20 h-fit max-w-sm bg-slate-400">
      <main class="text-3xl relative -top-5">🤣</main>
      <section class="space-y-2">
        <p class="font-semibold text-xl">TREE AND SHRUB PRUNING</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo iure inventore amet modi accusantium vero perspiciatis, incidunt dicta sed aspernatur!</p>
      </section>
    </div>

</div>
</div>

Related Examples