A sleek and modern Tabs Component built with React.js, showcasing a clean design and responsive functionality. Perfect for categorizing and presenting content dynamically!
- 📂 Reusable Tab Component with dynamic props.
- 🎨 Fully customizable and styled using CSS Modules.
- ⚡ Optimized for performance and SVG icons.
- 💻 Fully responsive and mobile-friendly.
src/
├── assets/
│ └── icons/
│ ├── news.svg
│ ├── sports.svg
│ └── health.svg
├── components/
│ ├── Header/
│ │ ├── Header.jsx
│ │ └── Header.css
│ ├── Tabs/
│ │ ├── Tab.jsx
│ │ ├── TabContent.jsx
│ │ └── Tab.css
├── App.js
├── index.js
└── style.css
- React.js ⚛️
- CSS Modules 🎨
- SVG Icons 🖼️
git clone https://github.com/anissafia90/Tabs.git
cd tabs-with-react
npm install
npm start
Navigate to http://localhost:3000.
- The Header component manages the state for the active tab.
- Each tab is rendered dynamically via props, including its label and SVG icon.
- The active tab’s content is displayed in the TabContent component.
Contributions are welcome! Feel free to:
- Submit issues for bugs or feature requests.
- Fork the project and create a pull request.
- GitHub Repository: [Your GitHub Repo Link](#)