JSFiddle - React, Tailwind, and code Playground

by nerdycap007

HTML

<link rel="stylesheet" href="https://unpkg.com/@primer/[email protected]/dist/primer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
  <div id="app" class="m-4">
  
      <div class="d-flex flex-justify-center">
        <button class="btn btn-primary mx-2" @click="pushTweet">
          Add a Tweet
        </button>
        <button class="btn btn-danger mx-2" @click="popTweet">
          Remove a Tweet
        </button>
        <button class="btn mx-2" @click="shuffleTweets">
          Shuffle
        </button>
      </div>
      
      <tweet-box v-for="tweet in tweets" :key="tweet.id"
      :tweet="tweet" />
  
  </div>

Vue

const tweets = [
  {
    id: 1,
    name: 'Thanos',
    handle: '@thanos',
    img: 'https://randomuser.me/api/portraits/men/27.jpg',
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta ornare ipsum.",
  },
  { 
    id: 2,
    name: 'Jane Doe',
    handle: '@janedoe',
    img: 'https://randomuser.me/api/portraits/women/2.jpg',
    text: 'Maecenas congue risus enim. Vestibulum sodales ante libero, sed molestie enim suscipit ac. ',
  },
  {
    id: 3,
    name: 'John Doe',
    handle: '@johndoe',
    img: 'https://randomuser.me/api/portraits/men/4.jpg',
    text: 'Morbi auctor dictum nunc. Aliquam sit amet imperdiet turpis. Donec ac accumsan tortor. ',
  }
]


Vue.component('tweet-box', {
  template: `
    <div class="bg-gray m-4 p-2 border rounded-1">
      <div class="d-flex">
      	<img :src="tweet.img"
        class="mb-2 mr-2"
        height="80px" />
        <div>
        	<p>
          	{{tweet.name}} 
          	<span class="text-gray">
          		({{tweet.handle}})
          	</span>
          </p>
        	
        	<span class="h6 text-normal">
          	<em>"{{tweet.text}}"</em>
          </span>
        </div>
        
      </div>
        <input class="form-control input-sm input-block" type="text" placeholder="Enter your comment"/>

    </div> 
  `,
  props: {
    tweet: Object
  }
});

new Vue({
  el: '#app',
  data: {
    tweets
  },
  methods: {
  	pushTweet() {
    	this.tweets.push({
      	id: 1,
    		name: 'Random Guy',
    		handle: '@random',
    		img: 'https://randomuser.me/api/portraits/men/29.jpg',
    		text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta ornare ipsum.",
      });
    },
    popTweet() {
    	this.tweets.pop();
    },
    shuffleTweets() {
    	this.tweets = _.shuffle(this.tweets);
    }
  }
});