Build a DROPDOWN MENU with REACT.JS and TAILWIND CSS 2023

hey guys I'm Cesar and this is Universe code today drop down this project is made with react and Tailwind CSS and you can see this is a drop down when I click nice you can see this effect and this is clean guys you can see this gradient and look this icon guys when I click it's changed and guys look at this look at the over effect this is round rounded on the right and with this border on the left this is clean guys come on guys easy but cool project today easy project but full of great and useful content so let's go guys okay guys first step tailwindcss.com get started for this project I want to use create react app this in the last few projects I used wheat so you can use what you want I already did that I don't want to waste your time so MPX create react app and the name of your project so CD in your project after this npm install for Tailwind and copy this in telwyn config.js this in index.css and after that npm runs start I want to show you in index.css I deleted everything and I paste this tree I delete I deleted everything in app.css and intelwyn.config.js I paste this and yeah guys we can start so delete this and this and this inapp.js I won't delete the and sign entire content so the entire adder and just H1 hello delete this logo delete this class name app save and okay this is the page right now this is the final project this is the current one so um the last step guys is install this Library react icons an amazing Library so thank you react icons just these guys npm install react icons so close this and close this okay nice now in vs code I use vs code you can use what you want of course I use this extension es7 this because I show you this because right now I want to create a new component I want the drop down Dot jsx and with that extension rfce Tab and you can see it's very amazing this extension so after this in-app.js drop down this and close this component and you can see drop down is here so delete this hello and yeah for this div class name age screen so the entire page grid place items Center so everything in the center BG gradient to write yeah it's better this way so the color from left to right from sky 600 to oops this and Save and you can see amazing Tailwind guys amazing guys look at this wow so the BG so the background is gradient to write to write from this color to this you can delete this import react these are of course two icons and endless.json ellis.json so it's there inside this Source guys oops inside the source you can see here it's an array with four objects just CD and emoticon so copy this or create what you want of course close this list okay so it's better in this way so I want a button with drop down of course inside the Steve class name relative Flex Flex column items in the center with the and hate and rounded LG save and this is of course for the container for the button so for the button itself class name BG blue 400 you can see the color after this padding four so for top bottom left and right with full Flex items in the center justify between I want to save just for sure the difference font bold text LG rounded LG tracking wider it's a little bit of distance from for each letter border four border transparent because I want to show you the Border just on the click so active border White duration 300 and active again text white and Save so when I click you can see the effect for the active text white you can see this text is white and the same for the Border very clean guys smash the like button I made this project for this because you can improve with Tailwind because you can see different concepts for sure this tracking wider and just this little space it's better so after this for for the button uh I want on click and a function with set is open oops open and when I click on this button I want to change the state so the previous state I want to set a different state for this I have to create the is open and set is open and so use state and I want false for this use State your state is here so you can see you see here and save now it's okay again so the initial state for this state is false when I click I want this previous state I want to change the state so true for this after inside always guys inside the button I want to say when it's different I want this icon or this I this other icon save and you can see this when I click the icon is changed because the same class name but if different so I want this carrot down or carry it up so the last thing is just this after this button I want to show you the list so is open is this true so I want to show you this a div oops div with class name BG blue 400 absolute I used oops I use relative for this and save for now inside this div I want of course the list so list dot map and I want for this the item and the index and arrow function and and inside the div again with the two H3 the first for item dot City and the second for item dot emoticon save when I click this is the list so we have to style this list after absolute top 20. flex and flex column item start rounded LG pending two and width full oops full nice great for the div inside the list I want a class name and the key with the index inside this is important for react so Flex with full justify between you can see here justify between and when I over I want this effect BG blue 300 cursor pointer rounded right LG border left transparent and save I want to show you this is the over Factor and this is the different this is rounded but not in the left just in the right corner again over so for the Border left I want the color white white and border left 4. when I over again you can see this for this H3 class name font bold and the last step just P four a little bit of padding when I over nice click clean guys look at this look at this it's amazing the over effect this border left the rounded corner here nice so guys you can see this is a cool project an easy project just few minutes but full of great content use state so the UK in react different things with Tailwind so subscribe to the channel follow me on Twitter and Instagram smash like button and leave a comment and guys thanks for watching and we'll see in the next video

Channel: Universe Code

Views: 44,175

Keywords: Build a Dropdown Menu with React.js and Tailwind Css 2023, create a dropdown with react and tailwind, dropdown with react and tailwind css, let's build a dropdown menu with react and tailwind, tutorial dropdown with react and tailwind, project dropdown with react and tailwind, dropdown menu with react.js and tailwind css 2023

Id: nS-kXNmB4Gg

Length: 16min 34sec (994 seconds)

Published: Mon Dec 12 2022