Input - Buefy example

index.html

 <div id="app" class="login columns is-vcentered is-centered ">
    <div class="column is-5 has-text-centered credantials">
      
      <div>
      <h1 class="has-text-weight-medium title is-3">Welcome Back
</h1>
      <h2 class="subtitle is-6"> Please login to your account.</h2>
      
 <b-field expanded>       
<input type="text" class="input" placeholder="Username" expanded>
</b-field>
<b-field>        
<input type="text" class="input" placeholder="Password">
  </b-field>
        <b-field class="has-text-left">
        <button class="button is-success is-fullwidth" expanded>Login</button>
</b-field>

          </div>      
    </div>
    <div class="column is-7 bg is-hidden-mobile"></div>
  </div>

input-buefy-example.markdown

Input - Buefy example

A Pen by Naurin on CodePen.

License.

script.babel

const example = {
    data() {
        return {
            name: 'John Silver'
        }
    }
}

            const app = new Vue(example)
            app.$mount('#app')
        

scripts

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/cleave.js/dist/cleave.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.6.1/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/vee-validate.min.js"></script>

style.scss

html,body {
  height:100%;
  widht:100%;
}
body {
  display:flex;
  justify-content:center;
  align-items:center;
}
.column {

}

.login {
  background-color:#FFF;
  height:90%;
  width:90%;
  max-width:1020px;
  box-shadow: 1px 3px 8px 5px hsla(0,0%,84%,.4);
}

.login > .column {
  height:100%;
}

.bg {
  background-image: url('https://images.pexels.com/photos/65438/pexels-photo-65438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-size:cover;
}

.credantials {
  display: flex;
  align-items:center;
}


.credantials > div {
  
  width: 100%;
}

@media only screen and (max-width: 600px) {
  body {
background-image: url('https://images.pexels.com/photos/65438/pexels-photo-65438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
  background-size:cover;  }
  
  .login {
    box-shadow:none;
    width:95%;
  }
}

styles

<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet" />
<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />