Desktop design

Mobile design

Contact form

<h1 class="text-3xl font-bold text-[hsl(187,24%,22%)] mb-6">Contact Us</h1>

pace-y-0"><label role="radio" aria-checked="false" tabindex="0" class="md:flex-1 custom-radio-label flex items-center space-x-3 border border-[hsl(186,15%,59%)] rounded-lg px-4 py-3 cursor-pointer transition duration-300 bg-white"><input

e="query"><div class="w-5 h-5 border-2 border-gray-300 rounded-full flex items-center justify-center transition relative before:content-[''] before:w-3 before:h-3 before:bg-[hsl(169,82%,27%)] before:rounded-full before:absolute before:opacity-0"></div>

n></label><label role="radio" aria-checked="false" tabindex="0" class="md:flex-1 custom-radio-label flex items-center space-x-3 border border-[hsl(186,15%,59%)] rounded-lg px-4 py-3 cursor-pointer transition duration-300 bg-white"><input

ter mb-2"><input tabindex="0" id="beingContacted" role="checkbox" aria-checked="false" aria-labelledby="beingContactedLabel" class="appearance-none w-5 h-5 border-2 border-gray-300 cursor-pointer focus:ring checked:border-transparent focus:outline-none checked:bg-[url('/images/icon-checkbox-check.svg')] bg-no-repeat bg-center" type="checkbox" name="beingContacted"><label

Design comparison

Please log in to post a comment

Responsive Contact form using react.js and tailwind

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community