Two tier grid with icon, heading and description blocks

This component displays a two tier grid layout with blocks containing an icon, heading and description text. The top tier is a single centered content block. The bottom tier is a responsive 3 column grid on large screens that stacks vertically on small screens. Each column contains an icon, heading and description. Tailwind utilities like text alignment, font sizes and padding are used to style the content. The bg-white class adds a white background color. The rounded-2xl class rounds the corners. The mx-auto and max-w classes constrain widths. The grid and gap utilities create the multi-column grid layout.

Similar Components

Other components related to grid, columns, icons, content blocks, responsive tags