https://github.com/rhw-repo/react-tab-component
Live demo React.js (in Vite) tabbed component. JavaScript, HTML, CSS. Accessiblility, responsive CSS, CSS Flexbox, CSS Grid, & React Tooltips. ESLint, Prettier.
https://github.com/rhw-repo/react-tab-component
css css-flexbox css-grid eslint-prettier html5 javascript javascript-es6 reactjs tooltips vite
Last synced: about 2 months ago
JSON representation
Live demo React.js (in Vite) tabbed component. JavaScript, HTML, CSS. Accessiblility, responsive CSS, CSS Flexbox, CSS Grid, & React Tooltips. ESLint, Prettier.
- Host: GitHub
- URL: https://github.com/rhw-repo/react-tab-component
- Owner: rhw-repo
- Created: 2025-05-07T14:47:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-18T11:38:00.000Z (7 months ago)
- Last Synced: 2025-11-18T13:11:03.811Z (7 months ago)
- Topics: css, css-flexbox, css-grid, eslint-prettier, html5, javascript, javascript-es6, reactjs, tooltips, vite
- Language: JavaScript
- Homepage: https://react-tab-component-production.up.railway.app/
- Size: 149 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite Tabbed Component
## Live Demo
Check out the production build here: [Live Demo on Railway](https://react-tab-component-production.up.railway.app/)
Challenge: create a tabbed component from a reference Figma design without using the library tabbed component the design was based on.
Conditional rendering to toggle between tabs.
Prop types validation with React prop-types.
CSS Modules. System fonts.
react-tooltips Tooltips
Color matching: ColorZilla.
Linting: ESLint.
Formatting: Prettier.
## To run this project
To run this project, clone the repo and run:
`npm install`
or
`yarn`
to install dependencies followed by
`npm run dev`
to start the development server.