JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
        <div id="video-scroll" class="row">
        <!-- Loading Your Bike -->
            <div id="v1" class="video col-xs-12 col-sm-12 col-md-4 col-lg-3 no-padding">
                <img src="/uploadedImages/New2016/Ride_CapMetro/Ride/video-thumb-loading-your-bike.jpg" class="img-responsive thumbnail" title="Video1" alt="Video1">
                <a href="#" class="video-control" data-toggle="modal" data-target="#video1" data-thevideo="//www.youtube.com/embed/xhu40x9pcTY?rel=0"></a>
                <div class="caption">
                    <h5 class="med caps">Loading Your Bike</h5>
                    <p>Quick tips on how to properly load a bike onto CapMetro buses.</p>
                </div>
            </div>
            <!-- Using the CapMetro App -->
            <div id="v2" class="video col-xs-12 col-sm-12 col-md-4 col-lg-3 no-padding">
                <img src="/uploadedImages/New2016/Ride_CapMetro/Ride/video-thumb-using-the-capMetro-app.jpg" class="img-responsive thumbnail" title="Video2" alt="Video2">
                <div class="caption">
                    <h5 class="med caps">Using the CapMetro App
</h5>
                    <p>Quick tips on how to use the CapMetro app.</p>
                </div>
                <a href="#" class="video-control" data-toggle="modal" data-target="#video2" data-thevideo="//www.youtube.com/embed/5D7AuOlSYAw?rel=0"></a>
            </div>
            
            <!-- Paying Your Fare -->
            <div id="v3" class="video col-xs-12 col-sm-12 col-md-4 col-lg-3 no-padding">
                <img src="/uploadedImages/New2016/Ride_CapMetro/Ride/video-thumb-paying-your-fare.jpg" class="img-responsive thumbnail" title="Video3" alt="Video3">
                <a href="#" class="video-control" data-toggle="modal"...

CSS

@import '/css/re-brand/webfonts.css';
@import 'springPromo.css';

body {
    font-family: "DINNextLTPro-Regular",'Droid Sans', sans-serif;
    font-size: 100%;
}

.bold {
    font-family: "DINNextLTPro-Bold",'Droid Sans', sans-serif;
}
.cond {
    font-family: "DINNextLTPro-Condensed",'Droid Sans', sans-serif;
}
.med {
    font-family: "DINNextLTPro-Medium",'Droid Sans', sans-serif;
}

h1, h2, h3, h4 {
    margin: 0;
}

h1 {
    font-size: 8.25rem;
}

h2, h3 {
    font-size: 3rem;
}

h4 {
    font-size: 2.625rem;
    color: #929496;
}

p {
    font-size: 2rem;
}

#glamTitleBox {
    margin-right: 7%;
    position:relative;
}
   a#freeAppDesktop {
        margin-bottom: 20px;
        cursor: pointer;
        position: absolute;
        top: 10px;
        right: 0;
        z-index: 99;
        display: block;
        background: transparent;
        text-align:right;
    }
#glamTitle {
    display: block;
    text-transform: uppercase;
}

    #glamTitle small {
        display: block;
        color: inherit;
    }

#glamTitleBox hr {
    margin-top: 0px;
    margin-bottom: 10px;
    border: 0;
    border-top: 2px solid #FCB345;
}

.blue-copy {
    color: #0069AA;
}

.blue {
    color: #0069AA;
}

.caps {
    text-transform: uppercase;
}

.header-wrap {
    background: #0069aa;
    margin-bottom: 2em;
        -webkit-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.46);
    -moz-box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.46);
    box-shadow: 0px 2px 5px -1px rgba(0,0,0,0.46);
}

#mobileHeader .capmetro-app {
    background: #f1f1f1;
    min-height: 75px;
}

a.capmetro-logo {
    vertical-align: middle;
    padding: 15px 0;
    display: inline-block;
}

.title-strip {
    background-color: #0069aa;
    padding-left: 0;
    margin-bottom: 4px;
}

#twoTimerLogo {
    margin-bottom: 20px;
    padding: 0 0 0 4%;
}
.md-capmetro-app a {
}

a#freeAppMobile {
    display: inline-block;
    padding: 10px 0;
}

.title-strip-bar-title {
    background:...

JavaScript

$(document).ready(function () {

            function toggleChevron(e) {
                $(e.target)
                    .prev('.panel-heading')
                    .find("i.indicator")
                    .toggleClass('glyphicon-remove glyphicon-chevron-down');
            }
            $('#accordion').on('hidden.bs.collapse', toggleChevron);
            $('#accordion').on('shown.bs.collapse', toggleChevron);
            //Autoplay and Stop Video inside modal
            autoPlayYouTubeModal();

            //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
            function autoPlayYouTubeModal() {
                var trigger = $("body").find('[data-toggle="modal"]');
                trigger.click(function () {
                    var theModal = $(this).data("target"),
                        videoSRC = $(this).attr("data-theVideo"),
                        videoSRCauto = videoSRC + "&autoplay=1";
                    $(theModal + ' iframe').attr('src', videoSRCauto);
                    $(theModal + ' button.close').click(function () {
                        $(theModal + ' iframe').attr('src', videoSRC);
                    });
                    $('.modal').click(function () {
                        $(theModal + ' iframe').attr('src', videoSRC);
                    });
                });
            }

        });