pile carde scroll

This tailwind example is contributed by Omer fils ELENGA, on 23-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Carousel Other Grid Range Slider Blog Card

Author Omer fils ELENGA

Tailwind v3.4 593 3

Fork Fullscreen

<div
    class="sticky top-20 z-10 bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row h-[500px] mb-20 p-4 rounded-3xl border border-gray-500 border-2">
    <div class="md:w-1/2 h-1/2 md:h-full relative rounded-3xl ">
      <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=2070&auto=format&fit=crop"
                    alt="Particuliers" class="absolute  rounded-3xl inset-0 w-full h-full object-cover">
      <div class="absolute bottom-4 left-4 text-white text-2xl font-bold">Particuliers</div>
    </div>
    <div class="md:w-1/2 p-6 flex flex-col justify-start p-9 m-8">
      <h3 class="text-4xl mb-4 font-bold mb-2">Expressive API</h3>
      <p class="text-gray-600 text-2xl leading-relaxed ">You don't need to be an expert to use our plugin. Our
        expressive API is
        readable and well documented.</p>

</div>
  </div>

<div
    class="sticky top-32 z-20 bg-black text-white rounded-3xl shadow-xl overflow-hidden flex flex-col-reverse md:flex-row h-[500px] mb-20    p-4 rounded-3xl border border-gray-500 border-2">
    <div class="md:w-1/2 p-6 flex flex-col justify-start p-9 m-8">
      <h3 class="text-4xl mb-4 font-bold mb-2">Expressive API</h3>
      <p class="text-gray-600 text-2xl leading-relaxed ">You don't need to be an expert to use our plugin. Our
        expressive API is
        readable and well documented.</p>
    </div>
    <div class="md:w-1/2 h-1/2 md:h-full relative">
      <img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=2070&auto=format&fit=crop"
                    alt="Particuliers" class="absolute  rounded-3xl inset-0 w-full h-full object-cover">
      <div class="absolute bottom-4 right-4 text-white text-2xl font-bold">Particuliers</div>
    </div>
  </div>

<div class="absolute bottom-4 left-4 text-white text-2xl font-bold">Particuliers</div>
    </div>
    <div class="md:w-1/2 p-6 flex flex-col justify-start p-9 m-8">
      <h3 class="text-4xl mb-4 font-bold mb-2">Expressive API</h3>
      <p class="text-gray-600 text-2xl leading-relaxed ">You don't need to be an expert to use our plugin. Our
        expressive API is
        readable and well documented.</p>
    </div>
  </div>
</section>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

3 years ago

24.8k
Articles Card Grid

Noob

4 years ago

11.8k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k