JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css">
<div id="app">
  <div class="columns">
    <div class="column is-4">
      <div class="content is-small">
          <h2 class="is-size-5">
            Lorem ipsum dolor
          </h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla elementum, sodales urna eget, mattis dui. In hendrerit luctus sem in egestas. Sed sodales ipsum eu lectus consequat bibendum
          </p>
          <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis nulla elementum, sodales urna eget, mattis dui. In hendrerit luctus sem in egestas. Sed sodales ipsum eu lectus consequat bibendum
          </p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>

        <hr>

       <nav class="menu">
          <p class="menu-label has-text-black has-text-weight-bold">
            Navigation
          </p>
          <ul class="menu-list">
            <li v-for="one in templates" :key="one.id">
              <a
                :href="`#email${one.id}`"
                @click.prevent="scrollTo(one)"
              >
                Menu item {{ one.id }}
              </a>
            </li>
          </ul>
        </nav>
    </div>
    <div class="column">
      
    </div>
  </div>
</div>

Vue

new Vue({
	el: '#el',
  data() {
  	return {
    	template: [
      	{
        	id: 1,
          text: 'hello'
        },
        {
        	id: 2,
          text: 'konichiwa'
        },
        {
        	id: 3,
          text: 'bojour'
        },
        {
        	id: 4,
          text: 'priviet'
        }
      ]
    }
  },
  methods: {
  	scrollTo(template) {
    
    },
  }
})