Schuif om te bevestigen

Bouw een interactief UI-element: Schuif om te bevestigen.

Wat het is: Sleep de knop naar rechts; voorbij de markering maakt hij het zelf af.

Gedrag:
- Pilvormige baan van 320 x 64 px met links een ronde witte knop met een pijl.
- Sleep de knop naar rechts met pointer events (werkt met muis en touch); de tekst in de baan vervaagt naarmate je verder sleept en een gekleurde vulling groeit mee.
- Loslaten voorbij 80%: de knop schuift zelf naar het eind, de pijl wordt een vinkje en "Bevestigd" verschijnt. Laat je eerder los, dan veert de knop terug naar het begin met een zachte ease-out.
- Na 2 seconden reset het element.
- Toetsenbord: Enter of spatie op de knop bevestigt direct.

Eisen:
- Werk in de stack van dit project. Is het React met Tailwind CSS, maak dan één component zonder extra pakketten; anders gewone HTML, CSS en JavaScript.
- Volledig bedienbaar met toetsenbord en touch, met de juiste aria-attributen.
- Respecteer prefers-reduced-motion: minder of geen beweging.
- Neem de kleuren, lettertypes en afrondingen van mijn project over.
- Laat me aan het eind zien waar het component staat en hoe ik het gebruik.