JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<div id="app">
<section id="main" role="main">
<transition name="slide-fade">
<div class="asidecontainer" v-show="programShow">
<div class="aside1 aside">
<h3>14:00 - 16:00 Sqits Social media meeting</h3>
<p><small>Meeting met iedereen van Sqits voor een social media checkup</small></p>
</div>
<div class="aside2 aside">
<h3>16:00 - 18:00 Sqits presentatie</h3>
<p><small>Presentatie voor klanten van Sqits</small></p>
</div>
<div class="aside3 aside">
<h3>18:00 - 20:00 Sqits diner</h3>
<p><small>Dinner met alle klanten voor Sqits en bezoekers van het event</small></p>
</div>
</div>
</transition>
<div class="column col-xs-12 col-sm-6 col-lg-15 no-padding">
<transition-group name="list-complete">
<div class="social-item list-complete-item" v-for="message in messages" :key="message">
<img class="img-responsive img-full" :src="message.image">
<p>
{{ message.message }}
</p>
<div class="platform-twitter" v-if="message.platform == 'fb'">
<strong class="name facebook">
<a :href="message.adress" target="_blank">
<i class="fa fa-facebook"></i> {{ message.name }}
</a>
</strong>
<div class="stats" v-if="message.fblike > 0 || message.share > 0">
...
JavaScript
new Vue({
el: '#app',
data: {
message: {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'},
messages: [
{message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'tw'},
{message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'fb'},
],
headerShow: false,
programShow: false,
sliderShow: true
},
methods: {
addTweet: function() {
if(this.message.message){
this.messages.unshift(this.message);
this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
}
},
setTweet: function() {
setInterval(function() {
this.message = {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'};
this.messages.unshift(this.message);
}, 5000);
}
}
});