With styled components my react might look like this:
``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ```
That's easier than
``` <div className = " ... "> { ...} <div> <div> </div> ```
``` <Question> {...} <Footer> < button> { ... } </button> <QuestionBadge> </QuestionBadge> </Footer> </Question> ```
That's easier than
``` <div className = " ... "> { ...} <div> <div> </div> ```
<Question
mt0
textCenter
p8={extraPadding}
p2={!extraPadding}
/>
<Question
mt={0}
text="center"
p={extraPadding ? 8 : 2}
/> <button
bg="blue-400 hover:blue-500 dark:blue-500 dark:hover:blue-600"
text="sm white"
font="mono light"
p="y-2 x-4"
border="2 rounded blue-200"
>