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

409

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