JSFiddle - React, Tailwind, and code Playground

by Atinux

HTML

<link rel="stylesheet" href="https://npmcdn.com/bootstrap/dist/css/bootstrap.css">
<!--<script src="https://npmcdn.com/[email protected]/dist/vue.js"></script>-->
<script src="https://npmcdn.com/[email protected]/dist/vue.js"></script>
<script src="https://npmcdn.com/jquery/dist/jquery.js"></script>
<script src="https://npmcdn.com/lodash"></script>

<div id="app"></div>

SCSS

$colorCam = #42b983;
$colorScreen = #35495e;

.list-streams {
  display:flex;
  align-items:center;
  justify-content:center;
}

.stream {
  width: 200px;
  background:#222;
  position: relative;
  margin: 20px 10px;
  &.camera .stream-title { background: darken($colorCam, 10); }
  &.screen .stream-title { background: darken($colorScreen, 10); }
 }
 
 .stream-title {
   display: block;
   width:100%;
   background:#222;
   color: #fff;
   text-align: center;
   padding: 2px 0;
   text-transform:uppercase;
   font-size:14px;
   font-weight:bold;
 }
 
 .video-container{
   position:relative;
   height: 120px;
 }
 
.video-appended {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-transform:uppercase;
  font-size:12px;
  &.camera { background: $colorCam; }
  &.screen { background: $colorScreen; }
 }
 
 .button-wrap {
   display:flex;
   justify-content:center;
   margin-top:10px;
 }

Babel + JSX

var vm = new Vue({
	el: '#app',
	data: {
		streams: [
    	{ type: 'camera', order: 1, id: 'camera-video', name: 'camera element' },
      { type: 'screen', order: 2, id: 'screen-video', name: 'screen element' }
    ]
	},
  template: `
  	<section>
      <div class="list-streams">
        <div v-for="stream in streamsSorted" :class="['stream', stream.type]" :key="stream.id">
          <span class="stream-title">{{ stream.name }}</span>
          <div :id="stream.id" class="video-container"></div>
        </div>
      </div>
      <div class="button-wrap">
      	<button @click="switchOrder">Switch order</button>
      </div>
    </section>
   `,
  computed: {
  	streamsSorted() {
    	return _.orderBy(this.streams, ['order'], ['asc'])
    }
  },
  methods: {
  	switchOrder() {
    	console.log('showModal...')
      this.streams[0].order = this.streams[0].order === 2 ? 1 : 2
      this.streams[1].order = this.streams[1].order === 2 ? 1 : 2
    }
  },
  // ready() {
  mounted() {
  	this.$nextTick(() => {
    	$('#camera-video').append('<span class="video-appended camera">camera video (appended)</span>')
      $('#screen-video').append('<span class="video-appended screen">screen video (appended)</span>')
    })
  }
});