<div class='p-4'>
<form class="w-full max-w-lg border-2 border-slate-500 rounded-md p-4">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-first-name">
First Name
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
id="grid-first-name" type="text" placeholder="Jane">
</div>
<div class="w-full md:w-1/2 px-3">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-last-name">
Last Name
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-last-name" type="text" placeholder="Doe">
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-password">
Password
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-password" type="password" placeholder="******************">
<p class="text-gray-600 text-xs italic">Make it as long and as crazy as you'd
like</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-2">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-city">
City
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-city" type="text" placeholder="New York">
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-zip">
Zip
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-zip" type="text" placeholder="90210">
</div>
<div class='w-full flex mt-6 justify-center'>
<input type="button" value="send"
class='bg-violet-500 shadow-xl hover:shadow-none duration-300 w-1/2 py-2 rounded-md text-white text-xl cursor-pointer active:bg-violet-600'>
</div>
</div>
</form>
</div>
* {
box-sizing: border-box;
margin: 0;
}
body {
display:flex;
justify-content:center;
align-items:center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.