For this challenge you will need to use Tailwind classes to build the following responsive layout.
This layout contains:
- A heading section.
- A hero section.
- A main section with a list of 9 responsive cards.
- A footer section.
Suggestions:
- You can use random images from Lorem Picsum like this: https://picsum.photos/420/225?v=1, https://picsum.photos/420/225?v=2.
- You can start from this Tailwind seed project which already has the Tailwind libraries imported.
- The header should be responsive. This means that on smaller screens, the menu options should collapse.
- Cards should arrange responsively. This means that their layout has to change according to the screen size.
- For xs there should be 1 card per row, for sm 2 and for md and bigger 3.
The purpose of this challenge is for you to practice your Tailwind skills by creating a real UI. Please note that there is no right or wrong way to solve this. What we want to see is how you can solve this responsive layout just by using Tailwind classes. Please try not to use any custom classes. Have fun playing with Tailwind!