This repo is made of 2 projects:

1. Food Ninja: A recipe website to understand Tailwind CSS basics.
2. Ninja Coffee: A product page to understand Bulma basics.

A recipe website to understand Tailwind CSS basics.

See food-ninja folder

• setting up Tailwind CSS for development.
• handling fonts, colors, margin, padding and borders.
• extending theme colors and customizing font with tailwind.config.js.
• using flexbox, grid and responsive classes.
• reusing classes for cards, badges and buttons with @apply directive.
• displaying icons from Heroicons.
• building a responsive navbar.
• adding effects and transitions on hover.

Based on Tailwind CSS Tutorial by Shaun Pelling - The Net Ninja (2020).

A product page to understand Bulma basics.

See Demo on CodePen

See ninja-coffee folder

Based on Bulma CSS Tutorial by Shaun Pelling - The Net Ninja (2020).