Two-tier block with gradient blurred backgrounds

This component uses a relative container with overflow hidden to allow blurred gradient backgrounds to extend outside the boundaries. It has two angled gradient backgrounds - one blurred from the top and one from the left - to create a colorful abstract frame effect. Inside is a content block with heading, text, links and data points split into two tiers. The top tier has heading, text and links while the bottom tier has a responsive grid of data points. Typography and links are styled with text and font utilities. Overall it creates a colorful, eye-catching two-tier layout with angled gradient backgrounds.

Similar Components

Other components related to gradients, blur, backgrounds, two-tier, layout, grid, typography, utilities tags