JSFiddle - React, Tailwind, and code Playground

HTML

<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<div class="container clearfix">
    
        <div class="mainBody">
            
            <div class="grid_12">
                <h1>Play a Video II</h1>
            </div>
        
            <div class="grid_5">
                <div class="container_Video">[video here]</div>
            </div>
        
            <div class="grid_7">
                <p>Do you see the highlighted video in the top left corner of the application screen?</p>
                <p>Tap the image to play the video.</p>
                <p>Enjoy! We'll bring you back here after the video.</p>
            </div>
        
        </div> <!-- mainBody end -->
        
    
    </div>

CSS

body {
    background-color: black;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size:18px; /* base font size, all ems relate to this */
    margin: 8px 8px 0 8px;
}

h1, h2 {
    font-weight: bold;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 1.667em;
}


p {
    margin: 0 0 0.83333333333333em 0;
    font-size: 1em;
}

p.doubleMargin {
    margin-top: 1.66666666666667em;
}


img {
    max-width: 100%;
    height: auto;
    width: auto;
    vertical-align:top;
}


/* Links */

a {
    -webkit-tap-highlight-color:none;
}

/*
 & Columns : 12 
 & Gutter %: 20% 
 & MinWidth: 480px
 & MaxWidth: 800px
 */
.grid_1 { width: 4.6666666666667%; }
.grid_2 { width: 13%; }
.grid_3 { width: 21.333333333333%; }
.grid_4 { width: 29.666666666667%; }
.grid_5 { width: 38%; }
.grid_6 { width: 46.333333333333%; }
.grid_7 { width: 54.666666666667%; }
.grid_8 { width: 63%; }
.grid_9 { width: 71.333333333333%; }
.grid_10 { width: 79.666666666667%; }
.grid_11 { width: 88%; }
.grid_12 { width: 96.333333333333%; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin-left: 1.83333333333333%;
    margin-right: 1.83333333333333%;
    float: left;
    display: block;
}

.container {
    min-width: 480px; 
    max-width: 800px; /* #### set your max width here #### */
    background-color: white;
    padding: 10px;
    color: #333;
     margin: 0 auto;   /* remove comments to center */
    /* Firefox v1.0+ */
    -moz-border-radius:5px ;
    /* Safari v3.0+ and by Chrome v0.2+ */
    -webkit-border-radius:5px ;
    /* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
    border-radius:5px ;
}

.mainBody {
    min-height: 450px;
}

.welcomeContainer {
    margin-bottom: 0.55555555555556em;
    position: relative;
}

.container_Video {
    padding: 7%;
    text-align: center;
    outline: 1px solid #ddd;
}