# **Week 13 - 13.1 | Tailwind, Ref Arrays and Building Components**

## [Notes/Slides Link](https://www.canva.com/design/DAGVU1RXwn0/EBNpEgL7LxVUQd6ThorItA/edit?utm_content=DAGVU1RXwn0&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)

### https://github.com/100xdevs-cohort-3/week-13-otp-box

### [dub GitHub](https://github.com/dubinc/dub)


## Articles/Blogs Link:
-   [**Learn React – A Handbook for Beginners**](https://www.freecodecamp.org/news/react-for-beginners-handbook/#:~:text=React%20is%20a%20very%20popular,operation%20and%20should%20be%20minimized)
-   [**What is Tailwind CSS? A Beginner's Guide**](https://www.freecodecamp.org/news/what-is-tailwind-css-a-beginners-guide/)
-   [**Tailwind CSS: What It Is, Why Use It & Examples**](https://blog.hubspot.com/website/what-is-tailwind-css)
-   [**Using Tailwind CSS with React.js: A Concise Guide**](https://dev.to/haszankauna/using-tailwind-css-with-reactjs-a-concise-guide-33j)
-   [**How to Setup React and Tailwind CSS with Vite in a Project**](https://www.freecodecamp.org/news/how-to-install-tailwindcss-in-react/)
-   [**Install Tailwind CSS with Vite**](https://tailwindcss.com/docs/guides/vite)
-   [**Configuration**](https://tailwindcss.com/docs/configuration)
-   [**CSS Frameworks vs Custom CSS – What's the Difference?**](https://www.freecodecamp.org/news/css-frameworks-vs-custom-css/)


## Videos Link of Harkirat:
-   [**This UI Library is a GAME CHANGER!**](https://www.youtube.com/watch?v=HFr4h7WD6Hc)


## Official Website Link:
-   [**Tailwind CSS**](https://tailwindcss.com/)
-   [**Tailwind with Vite**](https://tailwindcss.com/docs/guides/vite)
-   [**React**](https://react.dev/)
-   [**useHooks**](https://usehooks.com/)
-   [**Vite**](https://vite.dev/)
-   [**React Router**](https://reactrouter.com/en/main)
-   [**Recoil - State Management Library**](https://recoiljs.org/)
-   [**Zustand - State Management Library**](https://zustand-demo.pmnd.rs/)
-   [**Zustand NPM - State Management Library**](https://www.npmjs.com/package/zustand)
-   [**Redux**](https://redux.js.org/)
-   [**Redux Toolkit**](https://redux-toolkit.js.org/)
-   [**React - NPM**](https://react.dev/)
-   [**Node.js**](https://nodejs.org/en)
-   [**Express**](https://expressjs.com/)
-   [**Express - NPM**](https://www.npmjs.com/package/express)
-   [**Express Middleware**](https://expressjs.com/en/guide/using-middleware.html)
-   [**Express Routing**](https://expressjs.com/en/guide/routing.html)
-   [**Express Error Handling**](https://expressjs.com/en/guide/error-handling.html)
-   [**NPM**](https://www.npmjs.com/)
-   [**JWT**](https://jwt.io/)
-   [**JWT - NPM**](https://www.npmjs.com/package/jsonwebtoken)
-   [**MongoDB**](https://www.mongodb.com/)
-   [**MongoDB - NPM**](https://www.npmjs.com/package/mongodb)
-   [**MongoDB Cloud | MongoDB**](https://www.mongodb.com/products/platform/cloud)
-   [**Mongoose**](https://mongoosejs.com/docs/)
-   [**Mongoose - NPM**](https://www.npmjs.com/package/mongoose?azure-portal=true)
-   [**Bcrypt**](https://www.npmjs.com/package/bcrypt)
-   [**Bcrypt - NPM**](https://www.npmjs.com/package/bcrypt)
-   [**Zod**](https://zod.dev/)
-   [**Zod - NPM**](https://www.npmjs.com/package/zod)
-   [**Dotenv**](https://www.dotenv.org/docs/)
-   [**Dotenv - NPM**](https://www.npmjs.com/package/dotenv)
-   [**EJS**](https://ejs.co/)
-   [**EJS - NPM**](https://www.npmjs.com/package/ejs)
