Desktop design

Error states

Mobile design

Age calculator app

ce="next"><link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/webpack-3d8a4506b263c8fc.js" crossorigin=""><scrip

s="16x16"><meta name="next-size-adjust"><scrip

="submit"><img alt="arrow" loading="lazy" width="24" height="24" decoding="async" data-nimg="1" style="color:transparent" src="/assets/images/icon-arrow.svg"></butt

s-center"><section class="bg-neutral-white xl:w-2/5 w-[90%] md:h-fit flex flex-col xl:rounded-3xl rounded-xl p-12 xl:rounded-br-[200px] rounded-br-[100px] shadow-md "><form

AY</label><input class="flex bg-white ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300 h-16 p-5 border border-neutral-smokeyGrey rounded-md text-3xl font-bold !ring-primary-purple 2xl:w-36 w-32 max-sm:w-full" placeholder="DD" id=":Rlnla:-form-item" aria-describedby=":Rlnla:-form-item-description" aria-invalid="false" name="day" value="1"></div>

TH</label><input class="flex bg-white ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300 h-16 p-5 border border-neutral-smokeyGrey rounded-md text-3xl font-bold !ring-primary-purple 2xl:w-36 w-32 max-sm:w-full" placeholder="MM" id=":R15nla:-form-item" aria-describedby=":R15nla:-form-item-description" aria-invalid="false" name="month" value="1"></div>

AR</label><input class="flex bg-white ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300 h-16 p-5 border border-neutral-smokeyGrey rounded-md text-3xl font-bold !ring-primary-purple 2xl:w-36 w-32 max-sm:w-full" placeholder="YYYY" id=":R1lnla:-form-item" aria-describedby=":R1lnla:-form-item-description" aria-invalid="false" name="year" value="1997"></div>

Please log in to post a comment

Community feedback

Age Calculator app using tailwind and shacn

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community