Numeros Tab e Input

Style/Templates.css

@@ -18,24 +18,36 @@ body{
     padding: 2%;
     border-radius: 2px;
 }
-.TabTitle{
+.TabTitle, .TabNumber{
+    color: grey;
     margin-bottom: 5%;
     font-size: 30px;
-    width: 94%;
+    width: 84%;
     text-align: left;
     border:none;
     border-bottom: 1px solid grey;
 }
+.TabNumber{
+    width: 10%;
+    
+}
 .InputContainer{
     width: 100%;
     text-align: center;
 }
-.Input{
+.InputNumber{
+    width: 5%;
+}
+.Input,.InputNumber{
+    color: grey;
     border:none;
     border-bottom: 1px solid grey;
     width: 25%;
     margin: 1%;
 }
+.InputNumber{
+    width: 5%;
+}
 .NewTabButton, .NewInputButton, .RemoveInputButton, .RemoveTabButton{
     text-align: center;
     margin: auto;
@@ -86,16 +98,21 @@ body{
     border-radius: 5px;
 }
 
-@media  ( max-width: 900px) {
-
+@media  ( max-width: 1050px) {
+    .TabNumber{
+        width: 10%;
+    }
     .TabTitle{
-        width: 90%;
+        width: 80%;
     }
 
 }
 @media  (max-width: 600px) {
+    .TabNumber{
+        width: 10%;
+    }
     .TabTitle{
-        width: 85%;
+        width:75%;
     }
     .RemoveInputButton{
         width: 30px;
@@ -107,7 +124,28 @@ body{
         height: 30px;
     }
     .Input{
-        width: 20%;
-        margin: 1%;
+        width: 16%;
+        margin: none;
     }
 }
+@media  ( max-width: 350px) {
+    .TabNumber{
+        width: 10%;
+    }
+    .TabTitle{
+        width:70%;
+    }
+    .RemoveInputButton{
+        width: 30px;
+        height: 30px;
+    }
+    
+    .RemoveTabButton{
+        width: 30px;
+        height: 30px;
+    }
+    .Input{
+        width: 15%;
+        margin: 0%;
+    }
+}
\ No newline at end of file

generate.html

@@ -27,6 +27,7 @@
 <!-- templates -->
 <template id="tabTemplate">
     <div class="TabCards">
+        <input type="number" class="TabNumber" value="01">
         <input class="TabTitle" placeholder="Titulo del Tab" type="text">
         <button class="RemoveTabButton" onclick="removeTab(this)">
                 X
@@ -42,6 +43,8 @@
 
 <template id="fieldTemplate">
     <div class="InputContainer">
+        
+        <input type="number" class="InputNumber" value="01">
         <input type="text" id="Titulo" class="Input" placeholder="Título">
         
         <select name="input" class="Input">