Skip to content
Submitted 4 months ago

Four card feature section with Tailwind CSS

Laura Nguyen•130
@laura-nguyen
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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

  • Kaczupinko•170
    @KaczupinkoPosted 3 months ago

    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

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