JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by chrischilcoat

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">

<div class="alert alert-info" role="alert">
  <span class="fa fa-spinner fa-spin"></span> Uploading 45 files...
</div>
<p class="text-uppercase">Activity</p>
<ul class="list-group list-group-flush">  
  <li class="list-group-item"><strong>Chris Chilcoat</strong> uploaded <strong>Movie.png</strong> <small class="text-secondary">0955 Tuesday</small></li>
  <li class="list-group-item"><strong>Chris Chilcoat</strong> deleted <strong>Movie.png</strong> <small class="text-secondary">0955 Tuesday</small></li>
  <li class="list-group-item"><strong>Chris Chilcoat</strong> renamed <strong>Movie.png</strong> to <strong>Media.png</strong> <small class="text-secondary">0955 Tuesday</small></li>
  <li class="list-group-item"><strong>Chris Chilcoat</strong> created <strong>C:/Videos</strong> <small class="text-secondary">0955 Tuesday</small></li>
  <li class="list-group-item"><strong>Chris Chilcoat</strong> moved <strong>C:/Videos</strong> to <strong>C:/Media/Videos</strong> <small class="text-secondary">0955 July 12, 2018</small></li>
</ul>



<hr/>





<div class="row">
  <div class="col-xs-8 col-xs-push-2">
    <div class="form-horizontal">

        <div class="row">
           <div class="col-md-12">
              <div>
              
              
                    <p>Let's get your Yakadrive setup.</p>
                    <div...

SCSS

body {
    padding:20px;
    background: url(https://www.yakabod.com/hubfs/iStock-629074838.jpg?t=1534449474747);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color:#fff;
    
}
body:after {
  background: rgba(37,169,225,1);
    background: -moz-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: -webkit-gradient(left top,right top,color-stop(0%,rgba(37,169,225,1)),color-stop(100%,rgba(0,116,106,1)));
    background: -webkit-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: -o-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: -ms-linear-gradient(left,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    background: linear-gradient(to right,rgba(37,169,225,1) 0%,rgba(0,116,106,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a4d3',endColorstr='#00756c',GradientType=1);
    opacity: .95;
    bottom: 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}
.control-label {
  color:#fff;
}
.form-group {
  border-color:lightblue;
}
.help-block {
  color: #fff;
  opacity:.7;
}
.list-group-item {
  color:black
}