JSFiddle - React, Tailwind, and code Playground

by GopsAB

HTML

<div id="blog-post-demo" class="demo">
      <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:title="post.title"
        v-bind:content="post.id"
      ></blog-post>
    </div>

JavaScript

Vue.component("blog-post", {
        props: ["post"],
        template: `
                  <div>
                  <h3>{{ post.title }}</h3> 
                  <p> #####: {{ post.content }} </p>
                  </div>
                  `
      });

      new Vue({
        el: "#blog-post-demo",
        data: {
          posts: [
            { id: 1, title: "My journey with Vue" },
            { id: 2, title: "Blogging with Vue" },
            { id: 3, title: "Why Vue is so fun" }
          ]
        }
      });