All solutions

What are you most proud of, and what would you do differently next time?

Result is quite close to the original.... but it took me a lot of time!

What challenges did you encounter, and how did you overcome them?

I struggled with that "tooltip", how to create it and how to position it. I have no idea if my solution is good or... not that good.

What specific areas of your project would you like help with?

I couldn't crop the images the same way as in the screenshots of the challenge. I don't know how bad is my Tailwind ;) Any feedback would be greatly appreciated.

What are you most proud of, and what would you do differently next time?

Result is quite close to the original. I used hidden input for the radio buttons, and selection done from the label is reflected using "peer-checked".

What challenges did you encounter, and how did you overcome them?

I was not familiar with form and how to manage it with javascript.

What specific areas of your project would you like help with?

Any feedback is welcome, especially on Tailwind CSS. ;)

What are you most proud of, and what would you do differently next time?

The result looks quite good. I used only Tailwind CSS without JS to do the accordion and relied on and .

What challenges did you encounter, and how did you overcome them?

I wasn't sure if I could achieve this without Javascript, but it seems possible after all ;)

What specific areas of your project would you like help with?

I used grid to display all the questions/answers. I wanted to rely on md:max-w-[524px] but with that there was a slight change in width when I unfolded the answer. I couldn't find a solution and I used a fixed value in the end (md:w-[524px]). Is there a way to avoid this resizing?

Also I tried to apply some animation when the answer appears but I was unable to get it working. And I don't know why :(

I tried things like: transition duration-300 group-open:opacity-100 opacity-0 on the paragraph of the answer, but no visible animation...

I tested with hover: instead of group-open: and then I can see the animation. group-open: is fullfilled (opacity is set to 100 when paragraph is visible...). Maybe I'm missing something obvious.

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

I don't know enough about Flexbox/Grid and Tailwind CSS. I guess I could simplify a bit.

ps: everything is in index.html, I'm using Tailwind CDN and set the config directly there.

What specific areas of your project would you like help with?

I always end up by adding margin/padding here and there. Maybe there is a better way...

If someone with experience in Tailwind and CSS could give me some directions, I would be forever grateful ;)

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

I don't know enough about CSS and Tailwind. I tried to do it only with flexbox, but to no avail. I switched to grid to display the 4 cards.

What specific areas of your project would you like help with?

I used absolute positions for the icons, but maybe I'm missing something simpler?

Is it possible to do the 4 cards in that pattern with Flexbox only? (And still have this intermediate state with 2x2?)

If someone with experience in Tailwind and CSS could give me some directions, I would be forever grateful ;)

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

I don't know enough about CSS and Tailwind.

The mobile version was ok, but then I struggled with desktop version. I had a hard time to get equal column width (with flexbox). In the end I used basis-1/2 and added a parent div for and the main content.

What specific areas of your project would you like help with?

I added md: with margin and padding here and there... But it doesn't feel that great...

If someone with experience in Tailwind and CSS could give me some directions, I would be forever grateful ;)

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

I don't know enough about CSS and Tailwind.

I have the feeling I'm just doing workarounds on top of workarounds.

If someone with experience in Tailwind and CSS could give me some directions, I would be forever grateful ;)

What specific areas of your project would you like help with?

For the table at the bottom, I would think would be perfect, but somehow I guess that's not valid. If I do the border myself, I couldn't manage to make it longer than the text.

I don't think this is the right way:

``

Also I guess there is probably a better way to have the right amount of space between the columns content without using fixed values...

For the bullet list, I couldn't manage to have the bullet aligned in the middle vertically, and again I feel my div inside is just a workaround to add some left padding...

`

            Total: Approximately 10 minutes
          
        

...`

I would love to get some feedback!

ps: everything is in index.html, I'm using Tailwind CDN and set the config directly there.

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

Don't know enough about CSS/Flexbox and Tailwind

What specific areas of your project would you like help with?

Any suggestions on how I can improve on my solution are welcome. Thank you!

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

Don't know enough about CSS/Flexbox and Tailwind

What specific areas of your project would you like help with?

Any suggestions on how I can improve on my solution are welcome. Thank you!

What are you most proud of, and what would you do differently next time?

Doesn't look as bad as I thought:)

What challenges did you encounter, and how did you overcome them?

Don't know enough about CSS/Flexbox and Tailwind

What specific areas of your project would you like help with?

CSS/Flexbox and Tailwind... I guess I should have use gap between h1 and p?