Responsive Contact Section using Tailwind CSS

[Music] hello everyone welcome to tyrus web development tips and tutorials in this video we will be building this beautiful contact form which is responsive using tailwind css so this is what it looks like on large desktops on tablets and on small mobile devices so let's get started since it takes a lot of time to set up tailwind css in a new project i have this repository which acts as a starter kit i have added this link in the description below you can go to that and directly clone this repository so let me copy this link open terminal let me cd into my desktop folder and i will say git clone paste the link and contact form is the name of my project click enter this is done see the contact form now let me open this folder up in vs code so the command for that is code space dot since we are inside the folder it opens up that for us in visual studio code so here you see we have some minimum set of files the first thing we need to do here is open a new terminal command j and here let me do npm install what this does for us is install all the dependencies because we need 11 css post css and auto prefixer so this project uses post css and it uses tails in css as a post css plugin we have the dependencies installed to see that there is no node modules folder here but we can reload the window and yes now you're able to see the node modules folder next we just need to do npm run build once because what that does is we have the styles.css in our source folder with all the tailwind directives and then in our public folder we have our index.html which is what we are going to modify this is linked to the sheet within the distribution folder and currently this is empty so when we run build you can see there is this build script in our package.json file so it makes use of both css and builds all the styles within the source folder into the distribution folder so we can use regular css npm run build this is complete so you see this styles.css is no more empty let's close this and now i would also i also have a watch script so whenever i change my index.html and any other config files it automatically builds every time let me say npm run watch okay so this is running let's first check if this is working so open with live server yes so if you have this gradient that means sales and css is successfully set up now let me remove all of this and let me change the title to contact form using taylor and css so the first thing i usually add to my body the first class is anti-aliased this makes the font look smoother and then since we have a very light gray background for the entire body let me add bg gray 100 then comes our whole contact form which is entirely centered within the screen so let me add a parent container for that which has display flex with full h min height screen so that at least the minimum height is of the screen and then to center the items justify center items center so just make sure that whatever you have within this container will be centered say for example i am in the center of the page okay you see so now this is in the center of the page now here we can have that contact form div here is the form that we will be building this background color is a shade of cyan and these colors that you see is a shade of teal since steel and cyan are not the colors included in tailwind by default let's go to the documentation and see how to include them and let me search for color ballet reference if you scroll down here yes so these are the colors used eel and theon now to include them go to curating colors copy this line and in the tailwind.config.js paste it on top of everything and then here within the theme with an extend block add colors and within this so we are extending the colors we are not replacing the existing color system here cyan colors and then peel colors dot peel okay and now we can use we can say bg cyan so that's probably bgcn700 and now this has a full width except that we have a max width restriction so maybe that could be maybe around 4 xl so that restricts the width in large desktop it doesn't stretch you know across the screen full screen and then padding an overall padding of about eight we have rounded corners which is probably rounded excel and then a shadow that is shadow lg we also have the text in white so text white let's see what this gives us yeah so we have something like this this is what we need next we need some text on the left and some text on the right this is the desktop version but on mobile you saw that this comes on top and this at the bottom and since we will be designing mobile first let me let me open up an iphone screen and here we'll add two divs within and we'll use flex call that is flex direction call so now this parent div will need to be flex display flex and then flex call we'll also need some space between the two divs which is vertical spacing so let me say space y say round six and now we have two divs one for the contact information and one for the contact form so within this we have all these information now you see we have uh three things here all of them stretched to make sure that there is equal space between that can be done using flex again and using justify between so let's have three divs again within this and this would again be flex the direction is again call and using justify between we can stretch all three now the first one being a h1 and a paragraph so h1 is contact us and the paragraph is some lorem text of course i'll remove a lot of these right and now the h1 needs to be given a font bold text say around 4xl and we also have a little spacing between the letters which can be done using tracking white and the paragraph is slightly it has a margin top or a padding top we could give it a pt too also it's not entirely white if you notice it's slightly the same color as the background but a very very light shade so next cyan 100 also the text is a little small so it would be text sm let's see what this gives us yeah so we have the h1 and we have the paragraph in place next comes the contact number email id and the address for which we will need some icons i like to use the ionicon ion icons maybe go to that it's ionicons.com and if you go to usage you will see that you will have to copy this script and paste it so let me paste it here and then let me search for the icon which is call icon so this i need a filled one so this is the one if you click on it you see the code to be added copy it and here we again have three more divs each for the contact details so let me paste it in the first one and then comes the phone number in a span tag let's see so this is uh we need to space the divs a little if the height of this div is greater so you know here in the desktop size this will space out on its own but on mobile since we don't have a minimum height on this everything gets congested that's where we need to have a vertical spacing so here we can say space y say at least an 8 will be needed something like this and now the call icon is slightly bigger also in the i think peel color so let's change that class we can directly add a class to this tag so text deal say 300 and also it's a larger size so text excel so this is basically of you know a font itself so you can change the color and the size using the the font utility classes so yeah the color is great and even the text this has to be spaced little and also the vertical alignment needs to be fixed so what we do is we add a inline flex to this div and a horizontal space of very little maybe spacex too also items center and now copy the same thing paste it two more times and this is what we have so what we do is we add flags to the parent container again flex call and then vertical spacing of let's try four it's a little more spaced out so space y six yeah that's fine so now we just need to change this to mail icon and location icon so mail this is the one so the name is mail also location this is the icon which is location so change this to mail change this to location add the email id here okay so yes we have that also ready then comes these social media icons so that again we can find it here sorry facebook which is facebook copy paste it here now each of these is a link so it will have to be wrapped with an a tag so facebook twitter linkedin and instagram now this can again be a flex container with a horizontal space of about four and the icons need to be a little large again so text lg this is white in color nazian so we don't have to change it and yes we have it this is perfect so we have the um left side the contact information div done for the mobile let's move on to the contact form so this is a white background div so bg white and then we have some rounded corners rounded xl also has a shadow shadow lg and then a padding overall padding of again a what does this give us yes so something like this is what we want so let's add a form element within this and within the form we have three uh inputs with their labels so i'm going to make this a flex container again with flex call and space y vertical spacing of about four and the form has three divs each of them having a label so your name this is a smaller text so text sm here comes the input with the placeholder your name and this has to be styled completely here i will use the ring utilities of tailwind to add a light border around the input and we can change it on hover so ring one which is the thickness of one and the color i wanted to be a very light gray and on hover we can change it then this has to be width full and rounded corners surrounded mb md a horizontal padding of about four vertical padding of say two also we don't need any outline so we need to disable that by saying outline none let's see what this gives us yeah this is exactly what we want and since we have the width full it uh you know moves accordingly we're not able to see the label because it's white in color we can change that for the entire div itself so text gray i think 600 that will do and here on focus of this input i want the ring thickness to be ring two and the focus and the color to be steel so ring tl 300 we'll see what this gives us let me close this up so on focus you see that the border thickness has increased and changes changed its color yes this is what we want so the same thing goes for email address we can easily copy this and paste change this to email address and type is email and everything else remains the same yes this is done uh sorry there's been a small mistake here so this has to this entire thing the label and the input has to be within the same div that's why we're seeing an unnecessary space there now this should fix it yeah i know but we need a slight margin on top of the input so we can just say maybe here margin to imagine top two here also and now copy the same thing for the text area message just change it to message and of course this is not an input this is a text area okay everything else is same we just have to add some rows here rows 4 and the text area is done now we need a button which is placed on the right so what we can do is we can add a button and then give it an inline block style and self end so what it does is it aligns itself to the end of the container which is to the right the background is i think vgcn same as the background of the form then text white font bold rounded corner surrounded lg a horizontal padding six vertical padding of say two it has uppercase and then small text so text sm and yeah of course we forgot the message which is send message we forgot this text yeah perfect we have the button also ready most of the uh styling is done except for these two things so we'll take care of that once we complete the desktop version as well so let's see what happens to this when we increase the width so it's great until here so somewhere at the md break point we want the flex column to change to flex row instead yeah add md break point we want this to change to flex row and also instead of space y 6 we want space x 6 and also make the space y as 0. i'll add this here okay so let's see yeah so at exactly md breakpoint we see this is what happens but you see this form is slightly smaller in width so it would be great if we could add uh some fixed width at md break point for this div the one with the form so only at md break point we can say with uh maybe 64. now that's small so with 80 yeah so that's what we need for smaller devices it stretches full width no problem but for in a desktop and larger devices we have this width set to 80 which is great so most of it is done we have the left side aligned the contact information aligned as we want but there's slightly more padding here as you see for larger devices uh so we can change that so instead of p8 for sm break point maybe we could add p p12 yeah this is great all right so the only thing pending now is adding these two design elements so some circles that are absolutely positioned and that can be done if if we add these circles within the right side div and position them absolutely that would be the best approach so for that what we can do is we can add those two circles here for which we will need to add relative position to the parent element and then the circles so which are absolutely position absolute width of say 40 height 40 bg feel 300 or i think 400 then rounded full that's how you get the circle so yeah so this uh we have the circle up about the same size only thing is we need to position one on the right and one on the bottom so let's do the right one first also you notice that it's overlapping it's coming on top of the form for which we'll have to add a z index to this form and this or this div so what we'll do is we need a relative positioning to add z index so we can say z10 and this can have a z index of zero so it goes behind it's gone behind you can't see it and now we can say right uh a negative right value is what we want so minus right minus say about 20 and then minus top minus 20. yeah so it's almost where it is but we don't want uh the rest of the circle to appear for which we need to have an overflow hidden on the entire div let's do that here yeah this is the contact form so let's say overflow hidden and once you do that that part is hidden great now the circle needs to be a little more to the top and little more to the right what we do is change the top and right values further yes that's what it is now coming to this circle copy the same thing paste it here now instead of our top and right i think it should be left and bottom yeah but a little more to the top so we can reduce the bottom uh value here maybe something like 16 yeah so there it goes and when you resize it yes this is how we have it on the mobile as well so congratulations you just completed a responsive contact form using tailwind entirely and no custom css we just configured the color steel and cyan apart from that everything is pure tailwind have fun thank you for watching hit a like and share this video ahead if you enjoyed watching this don't forget to subscribe below and turn on the notifications so you won't miss a single video from thyris

Channel: Thirus

Views: 22,174

Keywords: contact form, contact form css, responsive contact form, add a contact form to website, how to make a contact form, contact section web page, tailwind css examples, tailwind css components, responsive contact section tailwind css

Id: dy1xpf5Ugno

Length: 26min 43sec (1603 seconds)

Published: Fri Feb 26 2021