Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four card feature section with Tailwind CSS

@laura-nguyen

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm proud that I'm getting used to Tailwind CSS. It's my 2nd time using it. What I would do differently next time is revert back to using Sass for now. I feel like Tailwind CSS may be more advantageous to use for more significant projects such as a landing page. Since this task was simpler i.e. components, it would have been more time efficient to style with regular CSS or Sass

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

For the desktop layout I wasn't sure how to get the two cards to be in the same column in the middle. A solution I did was to wrap the two middle cards in a div and then do a 3-column grid. I'm open to other solutions

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

Any resources about flex would be great i.e. what is flex grow, flex shrink, etc

Community feedback

P
Kaczupinko 170

@Kaczupinko

Posted

You can add a custom box shadow to your Tailwind configuration like this:

module. exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom-blue': '0px 15px 30px -11px rgba(131, 166, 210, 0.5)',
      }
    }
  }
} 

And make sure the background in your <div> is white. Other than that, the project looks very nice, and personally, I like it. You can find everything you need regarding Tailwind at tailwindcss.com.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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