Desktop design

Mobile design

Contact form

<h1 class="text-3xl font-bold">Contact Us</h1>

<div><label for="email" class="font-medium">Email Address</label><input id="email" type="email" class="form-input mt-1 w-full cursor-pointer rounded-lg border border-gray-400 focus:border-formGreen-600 focus:bg-formGreen-200 hover:border-formGreen-600" name="email"></div>

<div><label for="message" class="font-medium">Message</label><textarea id="message" rows="4" class="form-textarea mt-1 w-full cursor-pointer rounded-lg border border-gray-400 focus:border-formGreen-600 focus:bg-formGreen-200 hover:border-formGreen-600" name="message"></textarea></div>

<div><label class="inline-flex items-center"><input type="checkbox" class="form-checkbox" name="consent"><span class="ml-2">I agree to the privacy policy</span></label></div>

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

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

Design comparison

Please log in to post a comment

Contact Form with react-hook-form and Tailwind CSS

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community