Tailwind CSS
/Intermediate
Layout Coding Challenges
Definition
Practical whiteboard or coding tests where you must construct a specific layout using Tailwind classes without looking at the documentation.
Explain Like I'm New
The interviewer draws a box on a whiteboard. It has a logo on the left, and a menu on the right, perfectly centered vertically. They hand you the marker and say: 'Write the Tailwind classes to build this.'
Real World Example
Building the 'Holy Grail' layout (Header, Footer, Sidebar, Main Content) using CSS Grid classes.
Common Use Cases
- •Technical interviews
Terminal Output
bash / terminal
/*
CHALLENGE:
Create a responsive Card Grid.
1 column on mobile, 3 columns on desktop.
Gap of 16px between cards.
SOLUTION:
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
*/
Interview Questions
basic
- How do you perfectly center a div horizontally and vertically taking up the whole screen?
intermediate
- Write the classes to create a standard Navbar with Logo on the far left and Links on the far right.