How to Build a Modern Grid Landing Page with React & TailwindCSS
HTML-код
- Опубликовано: 20 май 2024
- Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
Today we'll build an animated portfolio/landing page with React, Tailwind CSS and Framer Motion.
#javascript #reactjs #tailwindcss
📚 Video Links
Demo & Source code: www.hover.dev/components/grids
Logoipsum: logoipsum.com/
Dicebear avatars: www.dicebear.com/
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
0:00 - Introduction
0:23 - CSS Grid Overview
4:40 - Creating the Block component
8:47 - Styling the blocks
15:32 - Adding staggered grid animations 
Наука
![ChatGPT Can Now Talk Like a Human [Latest Updates]](/img/1.gif)
Man, I want to play around w/ Framer Motion so bad but I've always thought it'd take awhile to get used to. Super simple additions like in this video can really make things pop so I've GOT to start playing around.
Once again, you're able to explain something to where I'm not confused about it anymore. For some reason stagger animations kept making my brain hurt trying to understand how to set it up but it feels a lot easier now. Also, glad you showed how tailwind merge works, i had heard about it but never looked into it myself. It seems pretty useful. Great vid as always!
Always happy I can help 😁❤️
Nicely Explained 👍
Cool!!! Thanks
your explaination is very good
Thank you!
Hey! Great content! If you don't mind. What are you using to split the screen like that? and which browser is that?
Hey! Just chrome haha, and full screen on Mac let’s you pull multiple applications in and split em like this 🙂
Thnx 👍
Of course!
I have been trying to get into react and this video, despite not being a intro to react tutorial just made it click...
Hey Tom. Love the explanations. I've been having some trouble animating 3 circles in a svg staggered. I would have loved a pulsating effect of the circles. Don't know if you could make a video on that. And maybe another idea for you I was trying to animate the ShadCN Button. Tried adding a moving border didn't work. Tried a pulsating border too didn't work. So that could be another idea. Thank you for the great videos!
If you could by chance drop a link to something similar I could check it out! I have a suggestion thing on my website (the lightning bolt button thing) 😁
Hey, sorry to be a noob, but what initialization did you do prior to the code on the video? like, did you use vite? create-react-app?
create-next-app!
@@tomisloading tysm!
Video in 2x 😂
You kinda right, I’m bad about that sometimes 😂
I hate css...