Desktop design

Active states

Mobile design

Interactive card details form

:left-10`><div id=`img` class=`absolute z-1 z-0`><img s

l:top-52`><div id=`img` class=`absolute z-1 z-0`><img s

MM/YY)</p><input type=`number` maxlength=`2` name=`month` placeholder=`MM` class=`border-2 border-borderGray border-solid h-10 p-2 rounded-md w-20 active:border-active-gradient`><input

gradient`><input type=`number` maxlength=`2` name=`year` placeholder=`YY` class=`border-2 border-borderGray border-solid h-10 p-2 ml-2 rounded-md w-20 active:border-active-gradient`></div>

4`>CVC</p><input type=`number` maxlength=`3` name=`cvc` placeholder=`e.g. 123` class=`border-2 border-borderGray border-solid h-10 p-2 rounded-md w-5/6 active:border-active-gradient`></div>

Design comparison

Please log in to post a comment

Interactive card details form with Tailwind & React Hook Form

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community