UI Bug in ‘Why TailwindCSS’ Section: Misaligned Div and Number Benchmarks

[medmjoud]

There is a layout issue in the “Why TailwindCSS” section of the website/documentation. A gradient container has a shifted div, causing text and benchmarks like “6.4x render time performance,” “4.2x real-time frame rate,” and “multi-platform build time” to display incorrectly. This misalignment negatively affects the clarity and visual appeal of the content.

Steps to Reproduce
1. Navigate to the Why TailwindCSS home page , section "why tailwindcss" on the website.
2. Inspect the "Gradients" container where the benchmarks are listed.

Expected Behavior

The div containing the text and benchmarks should:
• Be properly aligned with 3d transforms container.
• Ensure text is clearly visible and appropriately spaced.

Environment Details
• Browser: (brave)
• Device: (Macbook pro 2020, 13 inch)

[medmjoud]

Here's the some screenshots:
normal view:

iphone 12 pro max view:

[RobinMalfait]

Hey! This design is implemented like this on purpose. Most items in the bento grid are cut-off. It does look like some people, like yourself, are confused by this and think this is a bug, so we might redesign these later.

However, going to close this for now since this is the expected behavior for now.

Thanks for flagging!