Let's build an Instagram header and tooltip UI clone with Next.js and TailwindCSS🚀🚀🔥🔥

👨‍💻 Source code: https://www.youtube.com/channel/UCu4-4FnutvSHVo9WHvq80Ww/join https://www.udemy.com/course/instagram-ui-clone-header-tooltip-w-nextjs-tailwindcss/?couponCode=06A56336E4DCBDA4DD3F https://ckmobile.gumroad.com/l/instagram-ui-clone-header-tooltip

📚Read articles: https://ckmobile.medium.com/instagram-ui-clone-with-tailwindcss-and-nextjs-all-articles-b0308a5489e

In this project, we are going to create the Instagram header UI clone with Next.js and tailwind CSS.

The instagram clone looks the same as the real one. It contain the search bar which has the search icon and the cross icon, we will use the react fontawesome and heroicon for creating the icons.

We will create the icons group and avatar with the help of Daisy UI, which enhance the tailwind CSS. We will also add the tooltip which like dropping from the heart icon and it will disppear after a few seconds. This tooltip display how many users just following you.

Also, the tooltip of the search will render only when user click on the input box.

Want to know how to create tooltip with animation by using CSS? https://www.youtube.com/watch?v=9CV0K46KWxc&t=12s

Want to know how to create a triangle shape with CSS? https://www.youtube.com/watch?v=X1rybfFNcBk&t=77s

00:00 create simple header 03:42 add instagram logo 08:08 searchbar 12:15 conditional render icons 14:22 icons group and avatar 20:07 start building heart tooltip 23:26 add triangle on tooltip 26:54 add animation on tooltip under heart 29:25 start building tooltip of searchbar 34:29 add triangle to the searchbar tooltip 36:12 conditionally render searchbar tooltip

How to build Instagram profile page? https://youtu.be/hyFyPmamQ40

How to create Instagram stories? https://www.youtube.com/watch?v=HETbUJ-lPGQ

📩 You can also subscribe or follow to get info or our (free) course coupons https://app.gumroad.com/ckmobile https://mailchi.mp/cb8cb6b3878e/javascript-course

📲 Follow Us: Gumroad courses:https://app.gumroad.com/ckmobile Linkedin: https://www.linkedin.com/company/ckmobi/ Telegram: https://t.me/ckmobi Twitter: https://twitter.com/ckmobilejavasc1 Instagram: https://www.instagram.com/ckmobile8050/ Quora: https://www.quora.com/profile/Ckmobile Pinterest: https://www.pinterest.com/ckmobile8050 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 🔥Complete Courses🔥 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ Gumroad Web and mobile complete courses https://app.gumroad.com/ckmobile

Complete CSS course https://www.udemy.com/course/draft/4112256/?referralCode=D70F3923FF6501A398AA

React native Expo for multiplatform mobile app development https://www.udemy.com/course/react-native-expo-for-multiplatform-ios-android-mobile-app-development/?referralCode=2FA276AA4E55CE5A2A39

Complete NodeJS course with express, socket io and MongoDB https://www.udemy.com/course/create-nodejs-app-with-express-socket-io-and-mongodb/?referralCode=4B0B97AD4B1908DD6588 Complete Progress Web App BootCamp https://www.udemy.com/course/complete-progressive-web-app-bootcamp/?referralCode=E04DAFEDCE920AB6EA55

Complete Modern JavaScript BootCamp from the beginning https://www.udemy.com/course/complete-modern-javascript-with-firebase-bootcamp-for-beginners/?referralCode=6AF7AA3DB6AD6B880D66

React - The Complete Guide with React Hook Redux 2020 in 4hr https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536F

Vue JS and Firebase:Build an iOS and Android chat app [2020] https://www.udemy.com/course/vuejs-and-firebase-build-an-ios-and-android-chat-app/?referralCode=D959334D3BC5DB1FDF53

New SAT Math Course https://www.udemy.com/course/new-sat-math-complete-course/?referralCode=4E1A982C127EA13EB3D8

New SAT Math Practice Test Explain https://www.udemy.com/course/new-sat-maths-explain/?referralCode=ABD0C235875F55CB6F5F

Get A* in GCSE Maths (Quadratic equations and graph) https://www.udemy.com/course/get-a-in-gcse-maths-quadratic-equations-and-graph/?referralCode=2E4D7672FE3571F59DF8

ckmobile aims to provide quality tutorials like reactjs, nextjs, firebase, javascript, nodejs, mongodb, expo reactnative. Learn it easily and create professional website and apps.

#javascript #webdevelopement #firebase #reactjs #nextjs #tailwindcss #css ... https://www.youtube.com/watch?v=OeRsk3jvLaY