Skip to content

anissafia90/Tabs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Create this tabs using React js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published