JSFiddle - React, Tailwind, and code Playground

by csrow

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div class='container'>
     <h1 class='title'>Title</h1>
    <div class='row'>
        <div class='main'>
            <img class='col-md-7 col-sm-8 img-responsive' src='main.png' />
        </div>
    </div>
    <div class='row'> <a href='#' class='component'>
        <video class='video col-md-4 col-sm-4' controls>
            <source   src='video1.mp4'/>
        </video>
    </a>
 <a href='#' class='component'>
        <video class='video col-md-4 col-sm-4' controls>
            <source src='video2.mp4'/>
        </video>
    </a>
 <a href='#' class='component'>
        <img class='col-md-4 col-sm-4 img-responsive' src='img1.png'/>
    </a>
 </div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

$('.component').click(function () {
    var clickClass = $(this).children(0).attr("class");
    var mainClass = $(".main").children(0).attr("class");
    var clickHTML = $(this).html();
    var mainHTML = $(".main").html();
    $(this).html(mainHTML);
    $(".main").html(clickHTML);
    $(this).children(0).attr("class",clickClass);
    $(".main").children(0).attr("class",mainClass);
});