Submitted 10 months ago

Four Card Section with Tailwind - Not a single CSS line

Daniel 🛸• 44,230

@danielmrz-dev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Took a Tailwind course recently and tried to apply my new skills on this project. Took me more time than usual to finish it since it was my first time practicing Tailwind. This framework is crazy, you can finish a project without coding a single CSS line. Quite happy with the result.

Feel free to leave me a comment if you know how to improve this project.

Feedback is appreciated! 😊

Community feedback

Derick de Jesus• 30

@derickcjesus

Posted 9 months ago

Olá, Daniel.

Estou desenvolvendo essa solução e me veio uma dúvida: é mais fácil desenvolver usando flex ou grid?

Daniel 🛸• 44,230

@danielmrz-dev

Posted 9 months ago

E aí Derick!

Nesse caso, acho que o grid é um pouco melhor. Uma coisa que aprendi sobre flex e grid:

Flex é mais indicado pra trabalhar com containers verticais OU horizontais (linhas ou colunas).
Grid é mais indicado quando você precisa trabalhar com ambos simultaneamente, linhas E colunas.

Como nesse projeto a gente tem que trabalhar com linhas e colunas, eu escolhi o grid.

Mas isso não te impede de usar o flex, se quiser!

Espero que ajude 😊

Rian Fernandes Matias da Silva• 120

@rianmatias

Posted 10 months ago

que curso de tailwind você fez? gostaria muito de aprender também

Daniel 🛸• 44,230

@danielmrz-dev

Posted 10 months ago

Fiz o da Alura! @rianmatias

Um curso simples e rápido, mas também porque o Tailwind traz muita coisa do CSS, então não é tão difícil.

Rian Fernandes Matias da Silva• 120

@rianmatias

Posted 10 months ago

@danielmrz-dev fui ver aqui dá não, vou procurar um no youtube, um que me ensine o básico pra já ir aprendendo, mas obrigado por falar onde foi.

chems eddine bourabia• 150

@chemsodev

Posted 10 months ago

wow it's so good I hope that I will be able to do such a work one day. I'm currently trying in this challenge I found it a little bit complicated, I will post it as soon as possible, I will really appreciate it if you take a look at it when I do thanks and good luck.

Uwuigbe Julius Osemwengie• 380

@Call4julius

Posted 10 months ago

I am yet to start learning tailwind css. I heard its a lot of fun. For the now i just want to get stronger with plain vanilla css.

P.S: What are the advantages of libraries like tailwind over the plain versions like css? I would like to have a feedback. Thanks in advance.

Daniel 🛸• 44,230

@danielmrz-dev

Posted 10 months ago

Well, I'm still learning about them, but I've noticed that you can reduce your code drastically. You can even finish a whole project without a single CSS line.

I think the best option is to combine them. I really like styling my projects from scratch.

@Call4julius

Uwuigbe Julius Osemwengie• 380

@Call4julius

Posted 10 months ago

@danielmrz-dev I think you are just like me. I like the hard work of doing it un-aided. Thanks for the response.

P.S: Have your tried your hands on the "social proof section" challenge?

Daniel 🛸• 44,230

@danielmrz-dev

Posted 10 months ago

I did! I had a hard time with that challenge, but I learned a lot from it! I even customized it a little!

Here's the link to my solution.

@Call4julius

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord