70 %

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>