https://github.com/clementmadiot/tabs_switch-react

https://github.com/clementmadiot/tabs_switch-react

Last synced: 12 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/clementmadiot/tabs_switch-react
• Owner: ClementMadiot
• Created: 2024-11-18T15:22:44.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-11-18T16:33:03.000Z (about 1 month ago)
• Last Synced: 2024-11-18T16:59:21.477Z (about 1 month ago)
• Language: JavaScript
• Size: 43 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

   


        

        

      

  
Simple Switcher tabs



## 
 📋 Summary

- ✨ [Introduction](#introduction)

- 🛠 [Technology Used](#tech-stack)

- 📝 [Features](#features)

- 🚀 [Launch App](#launch-app)

## 
 ✨ Introduction

**[ENG]** This project is a simple component built with React and Tailwind CSS. It displays three options, each with a title and a description. Clicking on an option switches the displayed content to that option's details.

**[FR]** Ce projet est un composant simple construit avec React et Tailwind CSS. Il affiche trois options, chacune avec un titre et une description. Cliquer sur une option permet de basculer le contenu affiché vers les détails de cette option.

## 📝 Features

- 👉 **Dynamic Content Switching**: Allows users to switch between three different options by clicking on their respective titles.

- 👉 **Clean and Modern UI**: Leverages Tailwind CSS for a visually appealing and responsive user interface.

- 👉 **Efficient Data Handling**: Utilizes a JavaScript array to store option data and the map method to render the options dynamically.

## 
 🛠 Technology Used

- [TailwindCSS](https://tailwindcss.com/docs/installation)

# 
 🚀 Launch App

Follow these steps to set up the project locally on your machine.

**Prerequisites**

>[!NOTE]

> Make sure you have the following installed on your machine:

- [Git](https://git-scm.com/)

- [Node.js](https://nodejs.org/en)

- [npm](https://www.npmjs.com/) *(Node Package Manager)*

**Cloning the Repository**

```bash

git clone {git remote URL}

cd {git project..}

```

**Installation**

> After cloning the repository, run the command `npm i` or `yarn i` to install the project's dependencies.

_npm_

```

npm install 

```

_yarn_

```

yarn install

```

> Once the dependencies are installed, start the project with the command `npm run dev`.