chore: update demo classes

Author: tugcekucukoglu

apps/showcase/demo/inputotp/custom-demo.tsx

@@ -4,25 +4,6 @@ import { InputOtp } from 'primereact/inputotp';
 export default function CustomDemo() {
     return (
         <div className="card flex justify-center">
-            <style scoped>
-                {`
-                    .custom-otp-input {
-                        width: 40px;
-                        font-size: 36px;
-                        border: 0 none;
-                        appearance: none;
-                        text-align: center;
-                        transition: all 0.2s;
-                        background: transparent;
-                        border-bottom: 2px solid var(--p-inputtext-border-color);
-                    }
-
-                    .custom-otp-input:focus {
-                        outline: 0 none;
-                        border-bottom-color: var(--p-primary-color);
-                    }
-                `}
-            </style>
             <InputOtp defaultValue={''}>
                 {(instance: InputOtpInstance) => {
                     const { onInput, onClick, onKeyDown, onPaste, state, registerText } = instance;
@@ -38,7 +19,7 @@ export default function CustomDemo() {
                                         key={index}
                                         type="text"
                                         inputMode="text"
-                                        className="custom-otp-input"
+                                        className="w-10 text-4xl border-0 appearance-none text-center transition-all duration-200 bg-transparent border-b-2 border-b-[var(--p-inputtext-border-color)] focus:outline-none focus:border-b-[var(--p-primary-color)]"
                                         maxLength={1}
                                         onInput={(e) => onInput(e, index)}
                                         onClick={onClick}

apps/showcase/demo/inputotp/sample-demo.tsx

@@ -7,45 +7,6 @@ import * as React from 'react';
 export default function SampleDemo() {
     return (
         <div className="card flex justify-center">
-            <style scoped>
-                {`
-                    .custom-otp-input-sample {
-                        width: 48px;
-                        height: 48px;
-                        font-size: 24px;
-                        appearance: none;
-                        text-align: center;
-                        transition: all 0.2s;
-                        border-radius: 0;
-                        border: 1px solid var(--p-inputtext-border-color);
-                        background: transparent;
-                        outline-offset: -2px;
-                        outline-color: transparent;
-                        border-right: 0 none;
-                        transition: outline-color 0.3s;
-                        color: var(--p-inputtext-color);
-                    }
-
-                    .custom-otp-input-sample:focus {
-                        outline: 2px solid var(--p-focus-ring-color);
-                    }
-
-                    .custom-otp-input-sample:first-child,
-                    .custom-otp-input-sample:nth-child(5) {
-                        border-top-left-radius: 12px;
-                        border-bottom-left-radius: 12px;
-                    }
-
-                    .custom-otp-input-sample:nth-child(3),
-                    .custom-otp-input-sample:last-child {
-                        border-top-right-radius: 12px;
-                        border-bottom-right-radius: 12px;
-                        border-right-width: 1px;
-                        border-right-style: solid;
-                        border-color: var(--p-inputtext-border-color);
-                    }
-                `}
-            </style>
             <div className="flex flex-col items-center">
                 <div className="font-bold text-xl mb-2">Authenticate Your Account</div>
                 <p className="text-surface-500 dark:text-surface-400 block mb-8">Please enter the code sent to your phone.</p>
@@ -58,19 +19,20 @@ export default function SampleDemo() {
                                 {Array.from({ length: 6 }, (_, index) => {
                                     registerText();
 
+                                    const inputClasses = [
+                                        'w-12 h-12 text-2xl appearance-none text-center transition-all duration-200',
+                                        'border border-[var(--p-inputtext-border-color)] bg-transparent',
+                                        'outline-offset-[-2px] outline-transparent transition-[outline-color] duration-300',
+                                        'text-[var(--p-inputtext-color)]',
+                                        index === 0 || index === 3 ? 'rounded-l-xl' : 'rounded-none',
+                                        index === 2 || index === 5 ? 'rounded-r-xl' : '',
+                                        !(index === 2 || index === 5) ? 'border-r-0' : '',
+                                        'focus:outline-2 focus:outline-[var(--p-focus-ring-color)]'
+                                    ].join(' ');
+
                                     return (
                                         <React.Fragment key={index}>
-                                            <input
-                                                value={state.tokens[index] ?? ''}
-                                                type="text"
-                                                inputMode="text"
-                                                className="custom-otp-input-sample"
-                                                maxLength={1}
-                                                onInput={(e) => onInput(e, index)}
-                                                onClick={onClick}
-                                                onKeyDown={onKeyDown}
-                                                onPaste={onPaste}
-                                            />
+                                            <input value={state.tokens[index] ?? ''} type="text" inputMode="text" className={inputClasses} maxLength={1} onInput={(e) => onInput(e, index)} onClick={onClick} onKeyDown={onKeyDown} onPaste={onPaste} />
                                             {index === 2 && (
                                                 <div className="px-4">
                                                     <MinusIcon />