Guarantee Ribbon Banner Block for React

Change the number in the heading and in the sentence, the length of DAYS (30 cells) and the labels under the bar, and the bar's grid (grid-cols-[repeat(30,…)]). The bar is a picture of the window, not a control: it's hidden from assistive technology because the heading and the sentence already say it, so keep them in step with it.

That the full amount goes back to the card used, if you write within 30 days of paying, on annual plans. The fine print says monthly plans can be cancelled at any time. Change the copy to match your real terms, and keep the card honest: a guarantee with exceptions should name them in the fine print, not hide them.

It's one span: a 9rem strip, turned 45 degrees with -rotate-45, parked across the corner with logical offsets (-start-9 top-7) inside a box with overflow-hidden and rounded corners, so the strip's ends are cut off by the card. The frame's + marks sit outside that box. Its label is real text, read before the heading.

The ribbon moves to the end-top corner and turns the other way (rtl:rotate-45), so it keeps crossing the corner the same way. The bar fills from the right, with Day 1 on the right, because a window reads in the reading direction.

The card fades up once, and the thirty cells fade in one after another over about half a second. With reduced motion the transitions are off and everything is simply there.

The card keeps its padding and everything stays centred. The thirty cells share the width, so they're slimmer on a phone but still thirty. At 320 pixels nothing scrolls sideways.