JSFiddle - React, Tailwind, and code Playground

by TimPietrusky

HTML

<div class="bf3-dialog">

    <div class="bf3-title">
        Battlefield 3 Patch
    </div>

    <div class="bf3-content">
        <p>
            A new patch is available: 13.7 GB
            <br>
            <br>
            Please download the patch or you can not play online.
            <br>
            <br>
            
            <hr />
            
            Progress
            <span class="bf3-slider">
                <span role="position" style="width:5%;"></span>
            </span>
        </p>
    </div>

</div>

<img id="full_page_nightlife" src="http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/BF3-Tank-SP-Screenshot-DE_656x369.jpg"></img>

CSS

@import url(http://fonts.googleapis.com/css?family=Doppio+One);

* {
    box-sizing: border-box;
}

html, 
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: left;
    
    background:#000;
}



#full_page_nightlife {position:absolute; z-index:1; width:100%; height:100%;opacity:.3}

.bf3-dialog {
    position:absolute;
    z-index:1337;
    top:25%;
    left:25%;
    width:50%;
    font: 1em 'Doppio One', sans-serif;
    color:#fff;
    text-transform: uppercase;
    
    text-shadow: 0 -1px 1px #333, 0 1px 1px #000, -1px 0px 2px rgba(0, 0, 0, .2);
    cursor:default;
}

.bf3-title {
background: -webkit-linear-gradient(top,  rgba(71,160,255,.6) 0%,rgba(0,49,99,.6) 100%);

    border: 1px solid rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    
    padding:5px;
}

.bf3-title:after {
    
}

.bf3-content {
    background:rgba(26, 25, 34, .8);
    border:1px solid rgba(26, 25, 34, .3);
    border-top:none;
    padding:5%;
}

.bf3-content p {
   margin:0;
   padding:0;
   width:100%;   
   padding:0;
   margin:0;
}

.bf3-content hr {
    background:rgba(255,255,255,.7);
    height:2px;
    border:none;
}

.bf3-slider {
    height:20px;
    width:100%;
    margin:0 auto;
    margin-top:10px;
    
    background:#fff;
    border:4px solid #fff;
    display:inline-block;
    overflow:hidden;
}

.bf3-slider span[role="position"] {
    background:#000;
   height:50px;
    display:inline-block;
}

JavaScript

$('.bf3-dialog').draggable();