Adding a focus state is simple using the focus: modifier along with any of the default classes provided by Tailwind CSS.
We can tap into the built-in hover state in CSS using the hover: modifier along with any of the default classes to achieve interactive designs.
All modern applications should be able to responsively fit into the screen size. Tailwind is a mobile-first framework, meaning that all of the classes that we have talked about thus far, are for mobile and trickle up to desktop. But we can change this with a couple of modifiers.
Challenge 4 - Block Gallery
Time for another challenge and this time we flex our muscles with some flexbox in this brain-twisting block gallery challenge.