Let's build an Instagram header and tooltip UI clone with Next.js and TailwindCSS🚀🚀🔥🔥
👨💻 Source code:
/ @ckmobile
https://www.udemy.com/course/instagra...
https://ckmobile.gumroad.com/l/instag...
📚Read articles:
/ instagram-ui-clone-with-tailwindcss-and-ne...
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?
• How to create tooltip with CSS
Want to know how to create a triangle shape with CSS?
• How to create a triangle with CSS ?
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?
• Let's build an instagram profile page...
How to create Instagram stories?
• Let's build a Instagram stories UI cl...
📩 You can also subscribe or follow to get info or our (free) course coupons
https://app.gumroad.com/ckmobile
https://mailchi.mp/cb8cb6b3878e/javas...
📲 Follow Us:
Gumroad courses:https://app.gumroad.com/ckmobile
Linkedin: / ckmobi
Telegram: https://t.me/ckmobi
Twitter: / ckmobilejavasc1
Instagram: / ckmobile8050
Quora: https://www.quora.com/profile/Ckmobile
Pinterest: / ckmobile8050
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Complete Courses🔥
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Gumroad Web and mobile complete courses
https://app.gumroad.com/ckmobile
Complete CSS course
https://www.udemy.com/course/draft/41...
React native Expo for multiplatform mobile app development
https://www.udemy.com/course/react-na...
Complete NodeJS course with express, socket io and MongoDB
https://www.udemy.com/course/create-n...
Complete Progress Web App BootCamp
https://www.udemy.com/course/complete...
Complete Modern JavaScript BootCamp from the beginning
https://www.udemy.com/course/complete...
React - The Complete Guide with React Hook Redux 2020 in 4hr
https://www.udemy.com/course/complete...
Vue JS and Firebase:Build an iOS and Android chat app [2020]
https://www.udemy.com/course/vuejs-an...
New SAT Math Course
https://www.udemy.com/course/new-sat-...
New SAT Math Practice Test Explain
https://www.udemy.com/course/new-sat-...
Get A* in GCSE Maths (Quadratic equations and graph)
https://www.udemy.com/course/get-a-in...
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