Add simple tabs project

src/data/projects/simple-tabs.md

@@ -0,0 +1,32 @@
+---
+title: 'Tabs'  
+description: 'Create a simple tabs component using HTML, CSS, and JavaScript.'  
+isNew: false  
+sort: 10  
+difficulty: 'beginner'  
+nature: 'JavaScript'
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:  
+  title: 'Create a Tabs Functionality Using HTML, CSS, and JavaScript'  
+  description: 'Learn how to build a tabs component with basic JavaScript for switching between content sections.'  
+  keywords:  
+    - 'javascript tabs'
+    - 'dynamic content'
+    - 'html and css'
+    - 'javascript project'  
+roadmapIds:  
+  - 'frontend'  
+
+---
+
+This project is designed to introduce you to basic DOM manipulation and event handling in JavaScript.
+
+You are required to create a simple tabs functionality using HTML, CSS, and basic JavaScript. The page will have four tabs, with the first tab being active by default. When the user clicks on another tab, the content of the current tab will be hidden, and the content of the selected tab will be displayed.
+
+[![Tabs Component Mockup](https://assets.roadmap.sh/guest/simple-tabs-8e6gy.png)](https://assets.roadmap.sh/guest/simple-tabs-8e6gy.png)
+
+This project will help you practice selecting elements with JavaScript, listen for click events, and manipulate the dom to show or hide relevant tab content.