That file has like, 60 lines. Calling it a "wall of HTML soup" is a bit disingenuous. But if you REALLY have that much aversion to code, there is no inherent reason why you couldn't split it even more.
CSS being miles away is again, just a matter of taste. No inherent reason why you could't use Tailwind for example.
To have even more HTML soup? No thanks. Luckily I live in a world of better DX. With styled-components my CSS primitives are typechecked. Hell even with SCSS and CSS modules I have more sane and IDE supported experience.
But this styling lives in your component file, doesn't it?
So it makes just as much "wall of [code] soup there as it makes it here".
Tailwind was just an example pointing out you don't need a separate your code across entirely different directories, not recommendation of specific technology
Stringly typed logic and CSS / JS somewhere miles away in directory structure making it very hard to reason about.
I very much prefer sticking to small, composable, encapsulated, actual components made in React or sth similar.