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.)