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.

Changelog

May 24 2020 All project pages use the base layout
May 24 2020 Help me @eleventy
May 24 2020 Use nunjucks templating and 11th data cascade
May 20 2020 Destroy your SEO with a Title Change
May 20 2020 May the button rise up to meet you!
May 20 2020 Added spacing utilities that don't seem to change anything
May 20 2020 Title to match the URL
May 20 2020 Simple Price Grid Component and notes