Two-Tiered Horizontal Content Section

This component uses Tailwind CSS's flexbox utilities to create a two-tiered horizontal section to showcase features or benefits. The outer <div> has flex overflow-x-auto to create a horizontally scrolling container on smaller screens. The inner <div> is a flex container with space-x-12 and whitespace-nowrap to horizontally space out the content boxes. Each content box is a flex container with text aligned center vertically. Styles like text-indigo-600, font-medium and py-3 are used to style the text consistently across the boxes. Overall it provides a responsive way to showcase multiple items horizontally.

Similar Components

Other components related to tailwind, flexbox, responsive, mobile-friendly, horizontal, section tags