Tisch reservieren

Unter der Preisliste steht jetzt ein Formular für die Tischreservierung. Seine Beschriftungen sind gestaltet, aber seine Felder sind unsichtbar, so wie Preflight sie hinterlassen hat, und seine Buttons reagieren auf nichts:

• Die zwei Felder haben einen Rahmen, abgerundete Ecken und Padding, und sie sind so breit wie das Formular.
• Ihre Platzhalter, die Beispiele in den leeren Feldern, haben ein helles Grau aus der Palette, nicht die halbtransparente Textfarbe, die Preflight ihnen gibt.
• Wenn du in ein Feld klickst, bekommt es einen Umriss im Amber des Cafés oder in einer anderen Farbe, die dir gefällt.
• Die Buttons mit den freien Uhrzeiten zeigen die Hand, und ihr Hintergrund ändert sich, wenn der Mauszeiger darüber steht. 17:00 und 19:00 sind ausgebucht, ihre Buttons haben darum das Attribut disabled: Sie sind abgeblendet, mit höchstens 60 % Deckkraft, zeigen den durchgestrichenen Kreis und ändern sich nicht, wenn der Mauszeiger darüber steht.
• Der Button „Tisch reservieren“ zeigt auch die Hand, und sein Hintergrund wird sanft dunkler, wenn der Mauszeiger darüber steht.

Die Prüfungen können den Mauszeiger nicht bewegen und nicht in ein Feld klicken. Für diese Zustände sehen sie sich das CSS an, das Tailwind aus deinen Klassen erzeugt, und suchen nach einer Regel, die das Element in diesem Zustand verändert.