JSFiddle - React, Tailwind, and code Playground

by SnehalKadwe

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div id="app">
  <h3 class="text-center my-5">
    {{msg}}
    </h3>
    <div class="border shadow mx-5 p-10">
      <span @click.stop.prevent="copyUrl()">
        <a :href="url" title="Click to copy url" data-toggle="tooltip" data-placement="top">
          {{ url }}
        </a>
        <input class="" type="hidden" id="'code1" v-model="url">
      </span>
    </div>

</div>

Vue

new Vue({
  el: "#app",
  data() {
    return {
      msg: "Example of copy to sample code",
      url: "http://www.example.com/sample"
    }
  },
  methods: {
    copyUrl() {
   
      let copyUrl = document.querySelector('#code1');
      console.log(copyUrl);
      copyUrl.setAttribute('type', 'text');
      copyUrl.select();
      document.execCommand('copy');
      copyUrl.setAttribute('type', 'hidden');
      this.$toastr.success('Copied successfully');
    },
  }
});