Learn CSS

You’re misunderstanding the relationship between components and styles.

Login box and messages are separate components, but they share padding metrics, border styles, a palette, etc.

Have you used tailwind before?

The implication here seems to be "when using HTML semantically", because I think everything you're talking about can be done with CSS if you're willing to abuse HTML.

Take this CSS accordion which uses hidden form elements: https://codepen.io/raubaca/pen/PZzpVe

I agree that if you want to use HTML semantically *and* have intuitive UX/UI, you're very limited in what you can do without Javascript, but this isn't *just* a failing of CSS; rather, I think it's due to the design of HTML and CSS historically being to the exclusion of the other, rather than with a symbiotic relationship in mind. Go far enough back into the history of web standards and it kind of makes sense though; HTML and precursors had been in development for years before CSS was standardized

I appreciate the semantics angle but I don't think it's actually related; semantics are a separate issue.

The reason the animation appears to work in the example you link to doesn't actually have anything to do with the form elements or semantics – rather, it's cheating by animating the `max-height` of the tab content from `0` to `100vh`.

This can be done just as easily without all the form stuff, but it's a bad solution to the accordion animation problem, because (1) it assumes that accordion content will never exceed the height of the viewport (what about on phones in landscape mode? you're only talking a few hundred pixels there), and (2) CSS will ease between the actual minimum and maximum values without regard for where the element's true height actually stops changing, i.e. it will animate from 0 to 100vh in the duration requested even if the height only ended up being like 20px and thus visually stops changing 5% of the way into the transition – so whatever duration and easing you specified isn't actually being rendered in the way that you wanted. If you specified an `ease-out` for example (starts fast, slows down at the end), you'd just get a super fast linear-looking transition that ends much quicker than you planned and never has the slow easing at the end (because CSS is actually still transitioning the `max-height` property which is no longer having any effect on your element that's much shorter than the max-height).

Sorry, my description of that one was a bit vague. The error I had in mind wasn't using `position: absolute` to anchor the button, but rather in not thinking about the offset parent.

As an example, if your goal is for the button to appear over the right-side inner box ("hero content") here:

    +-------------------------------------------+
    |+----------+  +---------------------------+|
    || nav      |  | hero                      ||
    ||          |  |                      (x)  ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    |+----------+  +---------------------------+|
    +-------------------------------------------+

...then you should make that button either a direct child of that hero content (and give that container `position: relative` to make it the offset parent), or if that's not semantically acceptable, then add a new container around the hero content which will match its size/position and serve as the button's offset parent.

Otherwise, if you just let the outer container be the offset parent because it happens to place the button in the same spot in the moment, then later when more content gets added to that container, you'll end up with this:

    +-------------------------------------------+
    |+----------+  +---------------------------+|
    || nav      |  | header                    ||
    ||          |  +----------------------(x)--+|
    ||          |  +---------------------------+|
    ||          |  | hero                      ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    ||          |  |                           ||
    |+----------+  +---------------------------+|
    +-------------------------------------------+

...where the button is no longer over the correct box, because it was never anchored to it correctly in the first place (instead, it was anchored to that outermost container).

Adam Argyle is rad.