Desktop Design

Active States

Mobile Design

Tip calculator app

ight="17"><input type="text" inputmode="numeric" pattern="^\d*\.?\d*$" name="bill" id="bill" class="inline-block w-full rounded border-2 border-transparent bg-dark-cyan-200 p-2 px-4 pb-3 pl-10 text-right text-2xl font-bold text-dark-cyan-900 outline-none placeholder:text-dark-cyan-300 focus:border-cyan-400" placeholder="0" value=""></div>

"></label><input type="text" inputmode="numeric" pattern="[0-9]*" name="custom-percent" class="inline-block h-full w-full rounded border-2 border-transparent bg-dark-cyan-200 p-2 py-1 text-right text-2xl font-bold text-dark-cyan-900 placeholder:text-dark-cyan-300 focus:border-cyan-400" id="custom-percent" placeholder="Custom" value=""></div>

ight="16"><input type="text" inputmode="numeric" pattern="[0-9]*" name="people" id="people" class="inline-block w-full rounded border-2 bg-dark-cyan-200 p-2 px-4 pb-3 pl-10 text-right text-2xl font-bold text-dark-cyan-900 outline-none placeholder:text-dark-cyan-300 border-transparent focus:border-cyan-400" placeholder="0" value=""></div>

>tter</h1><section class="grid gap-8 rounded-t-3xl bg-white p-8 md:grid-cols-2 md:gap-12 md:rounded-3xl"><div c

Design comparison

Please log in to post a comment

Tip calculator app (React, Vite, Typescript, Tailwind)

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community