Two-tiered responsive announcement banner

This HTML structure creates a two-tiered responsive announcement banner using Tailwind CSS utilities. The outer <div> has a background color of indigo-600. Inside is a container div to control max width at different screen sizes. The inner content is split into three flexible divs stacked horizontally. The left div contains a colored pill and announcement text. The right divs contain a call to action link and close button. Tailwind utilities control colors, padding, margins, font sizes, rounded corners, etc. At smaller screens the markup reorders divs vertically for responsive mobile layout. Media queries hide/show text and elements depending on screen size.

Similar Components

Other components related to html, css, tailwind, responsive, banner, announcement tags