In this video we'll create
the user interface for our Sign In page.
And I'll go pretty quickly
because it's a simple form.
Although it will also be a good example
of how to use Tailwind CSS.
So let's start with a "form" element,
where the user can enter their "Email".
For that we need an "input" field,
and I'm setting the "type" to "email"
so the browser will automatically validate the email.
Then we need another similar field
for the "Password".
In this case the input type will be "password",
so the browser will obscure
the value entered by the user.
Let's see what we have so far.
It's not easy to see
where the input fields are.
That's because Tailwind CSS by default
doesn't set any styles on the input elements.
But we can easily add some utility classes,
like a "border".
And we can see the border around the email input.
Now we should do the same for the password,
but rather than duplicating the same styles
I'm going to create a shared component instead.
Let's call it "Input", with a capital "I".
And this will be a React function component,
that will return an "input" element.
We want to pass the "type" as a prop,
so we can pass it to the native element.
But here we can add some CSS classes,
starting with "border".
This way in our SignInPage
we can replace the standard input element
with our own Input component.
And do the same for the password input,
so we don't need to set any classes here.
All the Inputs will use the same styles
defined in the React component,
and in fact we can see the border around both fields.
Now let's add some more styling.
If we type something in here,
the text is a bit too crammed.
Let's add some padding,
maybe 3 horizontally and 1 vertically.
That's better. I'm also going to set
the border as "rounded",
just so that it will look a little bit nicer.
Ok. This will do for the input elements.
Now, I'd like each field to be displayed
on a separate row,
and for that we'll need to style
these "label" elements.
Again, to make this reusable
I'll create another custom component.
Let's call this one "Field".
Again it's a React function component.
And here I'll paste the "label"
I copied from the page.
But to make it reusable we could pass
the "label" as a prop.
So this will be the "label" text
that we display instead of "Email",
and I wrapped it in a "span"
in case we want to style it up.
As for the Input element
we'll want to pass that as the "children" prop,
because we could have some fields
where instead of an "input" element
we want maybe a "textarea" or a "select".
So we can pass whatever element we want
inside the JSX tags.
Now, let's use our new Field component here,
setting the "label" text,
that in this case is "Email".
And of course closing the tag.
Let's do the same thing for the password field.
The "label" in this case is "Password",
that we can move from here.
And that's it.
Now we can add styles to this Field component.
Let's start by displaying it as "block",
so each field will be on a separate row.
In fact we could display the label text
on its own row as well.
And maybe add some more styles to this "span",
like using small text,
and some shade of "gray" as the colour.
We could also do with some margin on the Y axis,
to put some space between each field.
I think this looks good enough now.
I'll just make the input elements a bit wider,
like maybe "w-80".
This way if somebody has a long email
it should fit more easily.
Ok. Let's move on.
What we're still missing is a submit button.
By this point we know that
we want to create reusable components for everything.
So let's create a "Button" component.
And this will decorate a standard HTML button
with our own styles.
Let's take the "children" prop
and display it inside the "button",
so we can pass any content we like.
In the SignInPage
we can now import the new Button component,
passing "Sign In" as the text.
We could also set "type=submit",
since it's inside a form.
This will help later
when we handle the form submission.
But for that to work
we'll need to accept the "type" prop from here
and pass it down to the native "button".
Ok. Now, let's add some styles,
otherwise our button just looks like plain text.
Let's add some background colour,
and I'll use a dark shade of green,
since our website is about plants.
It could do with some padding.
To be visible the text should be white,
or maybe some light shade of "gray".
Ok. It's starting to look like a proper button.
Let's make it "rounded",
that always makes it look nicer.
And we're almost there,
but when we move the mouse over
it would be good to show that
it's getting activated.
So for the "hover" state
let's set the background to
a slightly lighter shade of green.
Let's see.
That works quite nicely.
Ok. As a last touch
let's add some margin at the top,
otherwise the button is
a bit too close to the input field.
And let's stop here for this video.
We could spend a lot more time
tweaking the styles,
but I think our SignInPage now looks decent enough,
and we can move on to adding the functionality
to actually perform the login.