Components
Quantity Input
TailwindCSS
ReactJS
Choose colors:
import React from "react";
export default function QuantityInput() {
const [quantity, setQuantity] = React.useState(1);
return (
<div className=" flex h-screen w-screen items-center justify-center bg-[#2C2C2C]">
<div className=" flex h-12 w-32 items-center justify-center gap-1 rounded-full bg-[#262626] text-[#ffffff]">
<button
className=" h-9 w-9 select-none rounded-full text-2xl hover:text-gray-400"
onClick={() => setQuantity((prev) => prev - 1)}
>
-
</button>
<p className=" flex h-9 w-9 items-center justify-center rounded-full bg-[#3b3b3b] text-sm font-semibold">
{quantity}
</p>
<button
className=" h-9 w-9 select-none rounded-full text-2xl hover:text-gray-400"
onClick={() => setQuantity((prev) => prev + 1)}
>
+
</button>
</div>
</div>
);
}
Read-only