<h2>RULOURI DE GAZON</h2>
<div class="tabs">
        <input type="radio" name="tabs" id="tabone" checked="checked">
        <label for="tabone">Tip peluza</label>
        <div class="tab">
          <form>
          <div class="metri1">
            Metri patrati: <input type="text" id="firstNumber" placeholder="introdu o valoare"/></div>  
          <div class="tip1">
            Tip peluza cost - 2,5euro / m2: <input type="checkbox" id="tip_peluza" value="2.5"/></div>
          <div class="button">
            <input type="button" class="calculeaza" onClick="multiplyBy()" value="CALCULEAZA PRETUL" /></div>
          </form>
          <p class="costtotal">COST TOTAL: <span id ="result"></span> EURO</p>
       </div><!-- tab -->
        
        <input type="radio" name="tabs" id="tabtwo">
        <label for="tabtwo">Tip sport</label>
        <div class="tab">
        <form>
        <div class="metri1">
          Metri patrati: <input type="text" id="firstNumber2" placeholder="introdu o valoare"/></div>  
        <div class="tip1">
          Tip sport cost - 2,5euro / m2: <input type="checkbox" id="tip_sport" value="2.5"/></div>
        <div class="button">
          <input type="button" class="calculeaza" onClick="multiplyBy2()" value="CALCULEAZA PRETUL" /></div>
          </form>
        <p class="costtotal">COST TOTAL: <span id ="result2"></span> EURO</p>
        </div><!-- tab -->
        
        <input type="radio" name="tabs" id="tabthree">
        <label for="tabthree">Tip seceta</label>
        <div class="tab">
        <form>
        <div class="metri1">
          Metri patrati: <input type="text" id="firstNumber3" placeholder="introdu o valoare"/></div>  
        <div class="tip1">
          Tip seceta cost - 3,5euro / m2: <input type="checkbox" id="tip_seceta" value="3.5"/></div>
        <div class="button">
          <input type="button" class="calculeaza" onClick="multiplyBy3()" value="CALCULEAZA PRETUL" /></div>
        </form>

      <p class="costtotal">COST TOTAL: <span id ="result3"></span> EURO</p>
        </div><!-- tab -->
      </div>

     

body{
  padding:40px;
}


/**
* Tabs
*/

.tabs {
  border:1px solid #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.tabs label {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #98bd5a;
  font-weight: bold;
  -webkit-transition: background ease 0.2s;
  transition: background ease 0.2s;
}

.tabs .tab {
  -webkit-box-ordinal-group: 100;
      -ms-flex-order: 99;
          order: 99;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.tabs input[type="radio"]:checked + label {
  background: #fff;
}

.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    -webkit-box-ordinal-group: NaN;
        -ms-flex-order: initial;
            order: initial;
  }

  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}

/*==*/

.metri1 {
  float:left;
  margin:10px 0;
  width:100%;
  display:block;
}
.tip1 {
  float:left;
  margin:10px 0;
  width:100%;
  display:block;
}
.button {
  float:left;
  margin:10px 0;
  width:100%;
  display:block;
}

input.calculeaza {
 border: 1px solid #555;
 padding: 8px;
 color: #000000;
 width: 250px;
 background: #98bd5a;
 -webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}

input[type="text"], input[type="password"], input[type="email"], select, textarea {
    padding-left: 5px !important;
    width: 98%;
}
p.costtotal {
  font-size: 20px;
}

  
function multiplyBy()
{
  num1 = document.getElementById("firstNumber").value;
  num2 = document.getElementById("tip_peluza").value;
 document.getElementById("result").innerHTML = num1 * num2;
}

function multiplyBy2()
{
  num3 = document.getElementById("firstNumber2").value;
  num4 = document.getElementById("tip_sport").value;
 document.getElementById("result2").innerHTML = num3 * num4;
}

function multiplyBy3()
{
  num5 = document.getElementById("firstNumber3").value;
  num6 = document.getElementById("tip_seceta").value;
 document.getElementById("result3").innerHTML = num5 * num6;
}