<div class="wrapper">
  <div class="container">
    <div class="title">Checkout Form</div>
    
    <div class="input-form">
      <div class="section-1">
        <div class="items">
          <label class="label">card number</label>
          <input type="text" class="input" maxlength="16" data-mask="0000 0000 0000 0000"placeholder="1234 1234 1234 1234">
        </div>
      </div>
      <div class="section-2">
        <div class="items">
          <label class="label">card holder</label>
          <input type="text" class="input" placeholder="Coding Market">
        </div>
      </div>
      <div class="section-3">
        <div class="items">
          <label class="label">Expire date</label>
          <input type="text" class="input" data-mask="00 / 00" placeholder="MM / YY">
        </div>
        <div class="items">
          <div class="cvc">
            <label class="label">cvc code</label>
            <div class="tooltip">?
              <div class="cvc-img"><img src="https://i.imgur.com/r8oXtry.png" alt=""></div>
            </div>
          </div>
          <input type="text" class="input" data-mask="0000" placeholder="0000">
        </div>
      </div>
    </div>
    
    <div class="btn">proceed</div>
    
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Open Sans', sans-serif;
}

body{
  background: url("https://i.imgur.com/LAfQyOR.jpg") no-repeat top center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  font-size: 16px;
}

.wrapper{
  width: 100%;
  padding: 10px;
}

.container{
  max-width: 500px;
  height: auto;
  margin: 0px auto;
  background: #fff;
  padding: 20px 40px 30px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top: 7px solid #5f6c7d;
}

.title{
  color: #5f6c7d;
  font-size: 2em;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 20px;
}

.input-form{
  margin-bottom: 20px;
}

.input-form .label{
    display: block;
    font-size: 1em;
    color: #212121;
    text-transform: capitalize;
    margin-bottom: 8px;
}

.input-form .items{
  margin-bottom: 20px;
}

.section-1 .items .input,
.section-2 .items .input,
.section-3 .items .input{
    background: transparent;
    border: 2px solid #BDBDBD;
    width: 100%;
    padding: 10px;
    font-size: 1em;
    color: #212121;
    border-radius: 3px;
}

.input-form .section-3{
  display: flex;
  justify-content: space-between;
}

.input-form .section-3 .items{
   width: 48%;
}

.btn{
  background: #5f6c7d;
  color: #fff;
  font-size: 1.25em;  
  padding: 10px 0;
  text-align: center;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 2px;
}

.cvc{
  display: flex;
  justify-content: space-between;
  position: relative;
  transition: all 0.3s ease;
}

.cvc .tooltip{
  color: #d4d4d4;
  border: 2px solid #d4d4d4;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align:center;
  cursor: pointer;
}

.cvc .cvc-img{
  position: absolute;
  top: -300%;
  right: 0;
  background: #5f6c7d;
  padding: 12px;
  border-radius: 5px;
  display: none;
}

.cvc .cvc-img img{
  width: 100px;
  height: auto;
  display: block;
}

.cvc:hover .cvc-img{
  display: block;
}

@media screen and (max-width: 460px){
  .input-form .section-3{
    flex-direction: column;
  }
  .input-form .section-3 .items{
     width: 100%;
  }
  .input-form .items{
    margin-bottom: 10px;
  }

  .input-form{
    margin-bottom: 15px;
  }
  .title{
    font-size: 1.5em;
    margin-bottom: 15px;
  }
}

$(".btn").click(function(){
  $(".input").val("");
});