Input Demo - Copy this React, Tailwind Component to your project

Number-input-with-plus/minus-buttons-export-default-function-InputDemo()-{-return-(-<NumberField-defaultValue={2048}-minValue={0}>-<div-className="space-y-2">-<Label-className="text-sm-font-medium-text-foreground">-Number-input-with-plus/minus-buttons-</Label>-<Group-className="relative-inline-flex-h-9-w-full-items-center-overflow-hidden-whitespace-nowrap-rounded-lg-border-border-input-text-sm-shadow-sm-shadow-black/5-transition-shadow-data-[focus-within]:border-ring-data-[disabled]:opacity-50-data-[focus-within]:outline-none-data-[focus-within]:ring-[3px]-data-[focus-within]:ring-ring/20">-<Button-slot="decrement"-className="-ms-px-flex-aspect-square-h-[inherit]-items-center-justify-center-rounded-s-lg-border-border-input-bg-background-text-sm-text-muted-foreground/80-transition-shadow-hover:bg-accent-hover:text-foreground-disabled:pointer-events-none-disabled:cursor-not-allowed-disabled:opacity-50"->-<Minus-size={16}-strokeWidth={2}-aria-hidden="true"-/>-</Button>-<Input-className="w-full-grow-bg-background-px-3-py-2-text-center-tabular-nums-text-foreground-focus:outline-none"-/>-<Button-slot="increment"-className="-me-px-flex-aspect-square-h-[inherit]-items-center-justify-center-rounded-e-lg-border-border-input-bg-background-text-sm-text-muted-foreground/80-transition-shadow-hover:bg-accent-hover:text-foreground-disabled:pointer-events-none-disabled:cursor-not-allowed-disabled:opacity-50"->-<Plus-size={16}-strokeWidth={2}-aria-hidden="true"-/>-</Button>-</Group>-</div>-<p-className="mt-2-text-xs-text-muted-foreground"-role="region"-aria-live="polite">-Built-with{"-"}-<a-className="underline-hover:text-foreground"-href="https://react-spectrum.adobe.com/react-aria/DateField.html"-target="_blank"-rel="noopener-nofollow"->-React-Aria-</a>-</p>-</NumberField>-);-}