[Image caption] Add captions under each tab image

[Kritvi-bhatia17]

Detailed description

There are a couple of issues identified:

1. Captions: We need to add individual captions under each tab image. When a caption is placed inside a tab, there is a missing 1rem top padding above the caption.
2. Background Display: The white background observed is the tab container itself, not a background on the image. As a result, anything inside the tab will display on that white background.

While we could build a custom solution to remove the white background, the current implementation is functioning as intended, aside from the missing 1rem top padding.

Possible solution

(@alisonjoseph mentioned -)
To address these issues, we need to enhance the Gatsby tabs component. A potential solution could involve creating a new tab type, such as <Tab type="image">, allowing us to style this variant differently to remove the background and adjust padding as needed.

Additional information

• Related issue
• Ref: Thread