JSFiddle - React, Tailwind, and code Playground

HTML

<div class="video-holder">
  <!-- Video -->
  <video playsinline="" muted="" loop="" width="100%" class="custom-video-player">
    
    <source src="https://cdn.sketchapp.com/assets/pages/smart-layout/smart-layout-teaser.mp4" type="video/mp4">
     
  </video>

  <!-- Progress bar -->
  <div class="video-progress-bar">
    <div class="video-progress-bar-fill" style="width: 8.42294%;"></div>
  </div>

  <!-- Video Controls -->
  <div class="controls-container">
    <button type="button" class="play-pause control">
      <img src="https://www.sketch.com/images/components/video-player/pause.svg" alt="Pause" class="pause">
      <img src="https://www.sketch.com/images/components/video-player/play.svg" alt="Play" class="play hidden">
    </button>
    <button type="button" class="mute control">
      <img src="https://www.sketch.com/images/components/video-player/volume-on.svg" alt="Volume on" class="volume-on hidden">
      <img src="https://www.sketch.com/images/components/video-player/volume-off.svg" alt="Volume off" class="volume-off">
    </button>
  </div>
</div>

CSS

.custom-video-player {
	border-radius: 4px;
	-webkit-box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.16);
	box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.16);
	background-color: #fff;
	display: block
}

.video-progress-bar {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 0 0 4px 4px;
	bottom: 0px;
	cursor: pointer;
	left: 0px;
	overflow: hidden;
	position: absolute;
	width: 100%
}

.video-progress-bar-fill {
	width: 0;
	height: 2px;
	background-color: #fa6400;
	-webkit-transition: width 0.35s linear, height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s;
	transition: width 0.35s linear, height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s
}

.video-progress-bar-fill.no-transition {
	-webkit-transition: width 0s linear, height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s;
	transition: width 0s linear, height 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s
}

.controls-container {
	left: -15px;
	bottom: 32px;
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.controls-container .control {
	background: none;
	background-color: #fff;
	border: none;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
	display: inline-block;
	margin-right: 12px;
	height: 56px;
	width: 56px;
	opacity: 0;
	-webkit-transform: translateY(20px);
	transform: translateY(20px);
	-webkit-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s cubic-bezier(0.25, 0.46, 0.45,...

JavaScript

! function(e) {
    var t = {};

    function n(o) {
        if (t[o]) return t[o].exports;
        var r = t[o] = {
            i: o,
            l: !1,
            exports: {}
        };
        return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
    }
    n.m = e, n.c = t, n.d = function(e, t, o) {
        n.o(e, t) || Object.defineProperty(e, t, {
            enumerable: !0,
            get: o
        })
    }, n.r = function(e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, n.t = function(e, t) {
        if (1 & t && (e = n(e)), 8 & t) return e;
        if (4 & t && "object" == typeof e && e && e.__esModule) return e;
        var o = Object.create(null);
        if (n.r(o), Object.defineProperty(o, "default", {
                enumerable: !0,
                value: e
            }), 2 & t && "string" != typeof e)
            for (var r in e) n.d(o, r, function(t) {
                return e[t]
            }.bind(null, r));
        return o
    }, n.n = function(e) {
        var t = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return n.d(t, "a", t), t
    }, n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, n.p = "", n(n.s = 1)
}([function(e, t) {
    var n = window.Sketch || {};
    n.funcs = {
        monthDiff: function(e, t) {
            var n;
            return n = 12 * (t.getFullYear() - e.getFullYear()), n -= e.getMonth() + 1, (n += t.getMonth()) <= 0 ? 0 : n
        },
        isEmail: function(e) {
            return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(e)
        },
        isScrolledIntoView: function(e) {
        ...