70 %

Toast is in Beta!Learn more →

Chris Biscardi

Building a form with Tailwind 2.0

This is a test post meant to examine the potential usage of a scrollytelling layout.

Let's build a login form using Tailwind. After including Tailwind on the page, we'll start out with some scaffolding html.

html
<form>
<label for="username">Username</label>
<input name="username" />
<label for="password">Password</label>
<input name="password" type="password" />
<input type="checkbox" name="remember"/>
<button>Log in</button>
</form>

The scaffolding HTML is set up as a minimal semantic

html
<form class="bg-pink-200 p-4 border border-pink-100 rounded grid grid-cols-2">
<label for="username">Username</label>
<input name="username" />
<label for="password">Password</label>
<input name="password" type="password" />
<input type="checkbox" name="remember"/>
<button>Log in</button>
</form>

some other stuff

html
<form class="bg-blue-200 p-12 border border-blue-100 rounded grid grid-cols-2">
<label for="username">Username</label>
<input name="username" />
<label for="password">Password</label>
<input name="password" type="password" />
<input type="checkbox" name="remember"/>
<button class="px-4 py-2 bg-blue-100 hover:bg-blue-200 text-black">Log in</button>
</form>