edwardlorilla

<div id="app">
  <div class="check-div">
    <h1>Please enter the verification code</h1>
    <div class="input-div">
      <input
             type="text"
             class="inputItem0"
             data-index="0"
             maxlength="1"
             autofocus

edwardlorilla

<template id="DropList">
  
  <div class="zq-drop-list" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
    <span>{{dplLable}}</span>
    <ul :style="{'display': unorderlist?'block':'none'}">
      <li v-for="(item, index) in datalist" :key="index" @click="onLiClick(index, $event)">{{item[labelproperty]}}</li>
    </ul>
  </div>
</template>
<div id="app">

edwardlorilla

<div id="dragContainer"><!-- Initial background of container -->
  <div id="dragBg"></div><!-- Green background -->
  <div id="dragText"></div><!-- Sliding container text -->
  <div id="dragHandler" class="dragHandlerBg"></div>
</div> <!-- Slider Initial background of the slider -->

edwardlorilla

<div class="code">
  <input type="text" value="" placeholder="Please enter the verification code (not case sensitive)" class="input-val">
  <canvas id="canvas" width="100" height="30"></canvas>
  <button class="btn">Submit</button>
</div>

edwardlorilla

<div id="app">
  <div class="water-marker" >
    <div v-watermarker="{text:'lorem ipsum',textColor:'rgba(180, 180, 180, 0.4)'}">
      <div class="water-marker-item">lorem ipsum</div>
    </div>
  </div>
</div>

edwardlorilla

<div id="app">
  <button @click="unlock">test open modal</button>
  <div :style="{'display': isLock ? 'none' : 'block' }" class="modal">
    <div class="modal-content">
      <span class="close-btn" @click="handleLock">&times;</span>
    </div>
      <div class="modal-content">
        <input type="password" :disabled="isLock">
      </div>
    </div>

edwardlorilla

 <input type="file" name="select" id="select" />
<div id="result"></div> 

edwardlorilla

 <div id="app" v-cloak>
   <div v-if="books.length">
     <table>
       <thead>
         <tr>
           <th></th>
           <th>Book name</th>
           <th>Publication date</th>
           <th>Price</th>
           <th>Purchase quantity</th>

edwardlorilla

GRWQEgZ

A Pen by Edward Lance Lorilla on CodePen.

License.

edwardlorilla

<canvas id="canvas" width="480" height="360"></canvas>