Skip to content

Latest commit

 

History

History
98 lines (66 loc) · 1.96 KB

README.md

File metadata and controls

98 lines (66 loc) · 1.96 KB

Tabs with React.js 🎉

A sleek and modern Tabs Component built with React.js, showcasing a clean design and responsive functionality. Perfect for categorizing and presenting content dynamically!

🚀 Features

  • 📂 Reusable Tab Component with dynamic props.
  • 🎨 Fully customizable and styled using CSS Modules.
  • ⚡ Optimized for performance and SVG icons.
  • 💻 Fully responsive and mobile-friendly.

📂 Project Structure

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

✨ Technologies Used

  • React.js ⚛️
  • CSS Modules 🎨
  • SVG Icons 🖼️

💻 How to Run Locally

1. Clone the Repository:

git clone https://github.com/anissafia90/Tabs.git
cd tabs-with-react

2. Install Dependencies:

npm install

3. Start the Development Server:

npm start

4. Open in Browser:

Navigate to http://localhost:3000.

🛠️ How It Works

  1. The Header component manages the state for the active tab.
  2. Each tab is rendered dynamically via props, including its label and SVG icon.
  3. The active tab’s content is displayed in the TabContent component.

🤝 Contributing

Contributions are welcome! Feel free to:

  • Submit issues for bugs or feature requests.
  • Fork the project and create a pull request.

🔗 Links

Made with ❤️ by Anis Safia