Simple Price Grid

I stumbled on Frontend Mentor recently and thought it looked like a pretty straightforward, free resource for design ideas to recreate. It's not all totally free, but a lot of it looks like it is right now. Here's a list of 16 front-end projects with designs that I'm starting with.

Here's my take on the first project example: Simple Price Grid Component.

Join our community

30-day, hassle-free money back guarantee

Gain access to our full library of tutorials along with expert code reviews. Perfect for any developers who are serious about honing their skills.

Monthly Subscription

$29per month

Full access for less than $1 a day

Why Us

  • Tutorials by industry experts
  • Peer & expert code review
  • Coding exercises
  • Access to our GitHub repos
  • Community forum
  • Flashcard decks
  • New videos every week

Thoughts and Notes

Points of Interest

  • Built with Tailwind standard colors, except the yellow. You can check out the source code to see my tailwind config theme extensions.
  • Copying a design is easier and more fun than creating from scratch.

Where I Deviated

  • I didn't bother to include the suggested font (Karla). I wasn't sure how to do it the most efficient way for just this page. WIP
  • Accessibility: Not sure this design was super accessible to begin with. Maybe I could have made it more accessible by tinkering with the built in colors. Not going to jump through those hoops for this example project.
  • All project pages use the base layout
  • Help me @eleventy
  • Use nunjucks templating and 11th data cascade
  • Destroy your SEO with a Title Change
  • May the button rise up to meet you!
  • Added spacing utilities that don't seem to change anything
  • Title to match the URL
  • Simple Price Grid Component and notes