JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap.css">
<script src="http://cdn.thejameskyle.com/jquery.flexslider.min.js"></script>
<div class="slider">
    <video src="vimeo" id="47179829" width="640" height="360" controls="1ab7ea" class="tip football">
        <h3><a target="_blank" href="https://vimeo.com/47179830">Alex</a></h3>
        <p></p>
        <span class="badge">Tip</span>
        <span class="badge">Football</span>
    </video>
    <video src="vimeo" id="47179830" width="640" height="360" controls="1ab7ea" class="tip basketball">
        <h3><a target="_blank" href="https://vimeo.com/47179830">Brandon</a></h3>
        <p>Brandon is an experienced private basketball coach in Boston  He has been training athletes for the last 6 years and has worked at many different youth basketball camps for the last 8 years. He specialises in ball-handling skills. He teaches players how to create their own shot off the dribble, using a variety of screens, and out of the triple threat. He is an excited, young and animated coach who uses encouragement to push his clients through workouts. As a player Brandon had a successful careeer playing College and Professional Basketball.</p>
        <span class="badge">Tip</span>
        <span class="badge">Basketball</span>
    </video>
    <video src="vimeo" id="47175712" width="640" height="360" controls="1ab7ea" class="basketball">
        <h3><a target="_blank" href="https://vimeo.com/47175712">Brandon</a></h3>
        <p>Brandon is an experienced private basketball coach in Boston  He has been training athletes for the last 6 years and has worked at many different youth basketball camps for the last 8 years. He specialises in ball-handling skills. He teaches players how to create their own shot off the dribble, using a variety of screens, and out of the triple threat. He is an excited, young and animated coach who uses encouragement to push his clients through workouts. As a player Brandon had a...

SCSS

/** COLORS */
    $dark: #252525;
    $white: #FEFEFE;

/** FONTS */
    $font-size: 14px;
    $line-height: 21px;
    $font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    $font-weight: 300;

@mixin font {
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: 1em;
    line-height: $line-height/$font-size*1em;
}


html {font-size: $font-size/16px*100%}

.no-js video {
    display: none;
}

body {
    @include font;
}

.video-container {
    display: inline-block;
    background: #e1e2e3;
    padding: 20px;
    margin: 20px;
    
    .video {
        margin: -20px -20px 20px;
        vertical-align: baseline;
    }
    
    :last-child {
        margin-bottom: 0;
    }
}

.slider {
    width: 680px;
    margin: 0 auto;
    overflow: visible !important;
}


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.slider {margin: 0; padding: 0;}
.slider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.slider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

JavaScript

var videos = $('video').wrapAll('<ul class="slides">');

$('.no-js').removeClass('no-js').addClass('js');

videos.each(function() {
    var $this = $(this),
        source = $this.attr('src'),
        username = $this.attr('name'),
        video = $this.attr('id'),
        protocol = $this.data('protocol'),
        poster = $this.attr('poster'),
        color = $this.attr('controls'),
        width = $this.width(),
        height = $this.height(),
        classes = $this.attr('class'),
        src_url, src, params = {},

        settings = 'webkitAllowFullScreen mozallowfullscreen allowFullScreen frameborder="0"';

    if (source === undefined || video === undefined) {
        console.error('Please include the source (src) and video (id)');
        return;
    }

    if (protocol === undefined) {
        protocol = 'https';
    }

    if (username === undefined) {
        params.byline = 0;
    }

    if (poster === undefined || poster === 0) {
        params.portrait = 0;
    }

    if (color === undefined) {
        color = '1ab7ea';
    }

    params.color = color;
    params.api = '1';

    params = $.param(params);

    var html = $this.html();



    if (source == 'vimeo') {
        src_url = 'player.vimeo.com/video/' + video;

        $this
            .wrap('<li class="item" id="/tv/#/' + video + '">')
            .wrap('<div class="video-container">')
            .after('<iframe ' + settings + '>')
            .next('iframe')
            .attr('src', protocol + '://' + src_url + '?' + params)
            .attr('width', width)
            .attr('height', height)
            .addClass('video vimeo')
            .after(html)
            .parent('.video-container')
            .addClass(classes);

    } else if (source == "youtube") {
        return;
    } else if (source == 'coachup') {
        return;
    }

    $this.remove();


});


$(document).ready(function() {
    $('.slider').flexslider({
        animation: "slide",
        smoothHeight: true,
     ...