TAILWIND CSS 

---
This quiz presumes a basic understanding of CSS.
Tailwind's class names are pretty intuitive; try to figure out from the class names what effect they have on their elements.

Click "Next" to begin!


consider this code: 

--------------------------

<div className="flex items-center justify-center px-0 md:px-3.5"> 

--------------------------

the first class sets the property of display to flex; second class sets align-items to: center; third class sets justify-content to center;  
 
the fourth class sets padding left and right to 0; but, the last class gives padding of 14px on each side, on screens size medium and higher 

Fill in the class names:

----------------------

<div className=" flex flex-col items-center justify-center ">

----------------------

1. The first class should make it a flex element. 
2. The second class should change the flex direction.
3. The third class should center children horizontally.
4. The fourth class should center children vertically.

Consider this code:

----------------------------

<div className="w-full relative h-[600px]">
----------------------------
 
this div will take the full width of its parent and has a relative position. We use square brackets to hard-code a value for the height of this element.

Consider this code:


------------------------------

<article className="flex flex-col w-full h-full items-start justify-center"> 
 
-------------------------------
 
This article will take the full size of its parent ; its children will be arranged in a column ; they'll aligned to the left horizontally, and will be centered vertically 

Consider this code:

----------------------------

<h1 className="anim-fade-up color-overlay ml-10 text-6xl md:text-7xl"/> 
 
----------------------------

This header has a left margin of 10 the text size is set to 6xl on small screens, but to 7xl on medium  screens and above; this is mobile -first design (any breakpoints specified in tailwind apply to screen sizes at that point and ABOVE; we code for mobile, then specify different values for larger screens where needed).