Grid Form

First name

Last name

E-mail address

Phone number

Mailing address

City

State

Zip

Password show

I agree to the Terms and Conditions

Submit Cancel

<form class="flex flex-col p-8 mx-auto mt-4 mb-12 border border-gray-100 rounded shadow-lg">
	<!-- First and Last name -->
	<div class="flex w-full">
		<div class="flex flex-col w-1/2 mb-2 mr-2">
			<label class="w-full m-1 text-base font-sans-demi">First name</label>
			<input type="text" name="first-name" placeholder="First name" v-model="formData.firstName" class="p-3 my-1 border border-gray-100 rounded placeholder:text-gray-600">
		</div>
		<div class="flex flex-col w-1/2 mb-2 ml-2">
			<label class="w-full m-1 text-base font-sans-demi">Last name</label>
			<input type="text" name="last-name" placeholder="Last Name" v-model="formData.lastName" class="p-3 my-1 border border-gray-100 rounded placeholder:text-gray-600">
		</div>
	</div>
	<div class="flex">
		<div class="mt-2 mb-4">
			<label class="cursor-pointer">
				<input type="checkbox" tabindex="0" class="mr-2" v-model="formData.agreeTerms"> I agree to the Terms and Conditions
			</label>
		</div>
	</div>
	<div class="flex mt-6">
		<a class="mr-4 btn btn--primary"
			@click="sendFormData()">Submit</a>
		<a class="btn" @click="clearData()">Cancel</a>
	</div>
</form>

Stacked Form

First name

Last name

E-mail address

Phone number

Message

I agree to Terms & Conditions

Cancel Submit

<form class="flex flex-col max-w-md p-8 mx-auto mt-4 mb-12 border border-gray-100 rounded shadow-lg">
	<div class="flex w-full">
		<div class="flex flex-col w-full mb-2">
			<label class="w-full m-1 text-base font-sans-demi">First name</label>
			<input type="text" name="first-name" placeholder="First name" v-model="formData.firstName" class="p-3 my-1 border border-gray-100 rounded placeholder:text-gray-600">
		</div>
	</div>
	<!-- Button row -->
	<div class="flex flex-col justify-end md:flex-row md:mt-8">
		<div class="mt-2 mb-4 md:flex-grow">
			<label class="cursor-pointer">
				<input type="checkbox" tabindex="0" class="mr-2" v-model="formData.agreeTerms"> I agree to Terms &amp; Conditions
			</label>
		</div>
		<div class="flex">
			<a class="mr-4 btn" @click="clearData()">Cancel</a>
			<button class="btn btn--primary"  @click="sendFormData()">Submit</button>
		</div>
	</div>
</form>

Inline Form

First name

Last name

E-mail address

Phone number

Message

 

Clear Submit

<form class="flex flex-col max-w-md pt-12 pb-8 mx-auto mt-4 mb-12 border border-gray-100 rounded shadow-lg">
	<div class="flex items-center mb-4">
		<div class="md:w-1/3">
			<label class="block pr-4 mb-1 font-bold text-gray md:text-right md:mb-0" for="first-name">
				First name
			</label>
		</div>
		<div class="md:w-2/3">
			<input class="w-3/4 p-3 my-1 border border-gray-100 rounded placeholder:text-gray-600" placeholder="First name" v-model="formData.firstName" id="first-name" type="text" value="">
		</div>
	</div>
	<div class="flex items-center mb-4">
		<div class="self-start mt-3 md:w-1/3">
			<label class="block pr-4 mb-1 font-bold text-gray md:text-right md:mb-0" for="message">
				&nbsp;
			</label>
		</div>
		<div class="flex md:w-2/3">
			<a class="mr-4 btn" @click="clearData()">Clear</a>
			<button class="btn btn--primary"  @click="sendFormData()">Submit</button>
		</div>
	</div>
</form>