JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app"></div>

JavaScript

const BlogCard = {
  props: ['img', 'bulletPoints'],
  template: `
    <div>
      {{ img }}
      <ul>
        <li v-for="item in bulletPoints">{{ item }}</li>
      </ul>
    </div>
  `
}

Vue.createApp({
  components: {
    BlogCard
  },
  
  template: `
    <div>
      <BlogCard
        img="image1.png"
        :bulletPoints="card1"
      />
      <BlogCard
        img="image2.png"
        :bulletPoints="card2"
      />
    </div>
  `,
  
  data: () => ({
    card1: [
      "this is a bullet point",
      "this is another bullet point",
    ],
    card2: [
      "this is a different bullet point",
      "this is another different bullet point",
    ]
  }),
}).mount('#app')