Styling the search form

[00:00] Let's move on to the search form. The form will contain three elements: one div to hold the svg search icon; which I'll paste in, a search input with placeholder search, and another div to hold an escape button that when pressed will close the modal.

[00:21] Let's open the modal, and here they are. Now, the svg icon will have w-5 h-5 and text-gray-700, the form itself will be a flex, and to center the items we'll use items-center. Next up, we want to position the icon over the form input, so the container will be absolute inset-y-0, left-0 to push it to the left, and then to center the icon we can use flex items-center. Finally let's add in some left padding using pl-4 and set pointer-events-none to let the user focus the input when clicking directly on the icon.

[01:08] Moving on to the input, we'll do w-full, py-4 for vertical padding, and pl-12 to add enough left padding for the text to be visible. border-b border-gray-100 outline-none and then placeholder-gray-400 to style the placeholder.

[01:28] For the button container, we'll do absolute inset-y-0, right-0 to push the element to the right, flex item-center to center the button, and then add some right padding. Then for the button itself, we'll do flex item-center to align the content, p-1.5 for padding, uppercase font-semibold, tracking-wider to make the text more legible, text-gray-700, rounded-md to make it rounded, border border-grade-200 and then on focus we'll do outline-none and focus:border-gray-300.

[02:12] Now, the button label is too big. We'll need to create a new utility class called text-xxs to add a new font size. Open your tailwind.config.js file, go under theme, extend, add the fontSize key, then the name of the font size; which is whatever we have after text-, in our case we have xxs. This will be an array where the first element is the font size; let's set it to .65rem, and we can use a second object argument to set the line-height; let's say 1.1rem. Let's save, and here it is; our label is way smaller.

[02:58] Now, if you remember our modal was supposed to be rounded. However, because we have some absolute elements in place, we also need to set overflow-hidden here, on the modal container. Save, and we're done styling the modal.