React Tailwind Responsivesite
Tailwind website. Using react-typed library for vicious typing animation. Neon green colors. Hover and scale in CSS. Build sections of a modern website today (Hero, Footer, Pricing Tiers, etc). Used an icon library for icons in the footer.
React JS & Tailwind CSS Responsive Website - Beginner Friendly
- Tutorial URL: https://www.youtube.com/watch?v=ZU-drSVodBw
- Tutorial description: Follow along and build this React JS & Tailwind CSS 100% mobile responsive website from scratch. We will install and use Tailwind CSS in a “Create-React-App” application. Use a really cool react package “React-Typed” for some text animation in the Hero component. UseState hook to toggle the mobile side drawer menu. Import “React-Icons” dependency for social icons.
Software versions
Problems in the project:
Couldn't get pricing tiers to scale upon hover I wrote the wrong syntax for hover scale setting in Tailwind CSS incorrect:
class="hover:scale(105)"correct:
class="hover:scale-105"
How to use
- clone / download
- npm install
- yarn start
Photos of project:
Apps used:
- Visual Studio Code or (coder slang: VS Code)
- Google Chrome: https://www.google.com/chrome/dr/download/
- GitHub CLI: https://cli.github.com/
Coding styles I used:
What I learned
- Learned how the Typed component of the react-typed module works to create the typing animation effect. Instead of writing one from scratch there's a component for it.
