Thank you for sharing! It is a good blog. I am working on my site wagering advisors and I am sure that your advice will help me to upgrade it.

Looks good. That said, because you said it's for learning purposes, I'm willing to give you a pass. If this were for real, I'd say it's way overkill. (I'm betting you already know that, though. LOL!) The app.js alone is almost 3mb, which takes about 6 seconds over a fast 3G network (almost 20 seconds over slow 3G.)

It looks like you were able to cut out a huge amount of TailwindCSS. Did you use PurgeCSS for that? I recently discovered TailwindCSS and am really liking it, though I'm not a huge fan of all those classes being in the HTML directly.

If I might make a suggestion: I would look for patterns and configure classes to apply tailwind classes to it. Your checkmarks would be a good candidate for that since they're used over and over. You know, the DRY principle. For example, instead of this for every single checkbox:

class="material-design-icon checkbox-marked-circle-icon pr-2 text-green-500"

It might be just this:

class="my-checkmark"

Then in my styles.css, before building the end result, after the tailwind imports, I'd have something like this:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.my-checkmark {
  @apply material-design-icon;
  @apply checkbox-marked-circle-icon;
  @apply pr-2;
  @apply text-green-500;
}

That's just me, though, since I like to see less cluttered HTML, if at all possible. It's still utility-first, but more in the css file instead of the HTML. This is one reason I like Tailwind. It allows for this level of customization so best practices can be retained and keep HTML relative uncluttered.

(Of course, I would never name it "my-checkmark". That's just for demonstration purposes.)