JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
    <video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto" width="640" height="360"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    data-setup='{"example_option":true}'>
        <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
        <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    </video>
</div>

CSS

body, html {
    width: 100%;
    height: 100%;
    
}

body {
    background: pink;
    position: relative;
}

.center {
    width: 640px;
    height: 360px;
    background: red;
    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -180px;
}