JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <link href="test.css" rel="stylesheet" type="text/css" id="csslink" />
</head>
<body>
    <div id="message">
        <div id="gifElement">
            <img src="copierprogress.gif" alt="missing gif file" /></div>
        <div id="messageText">
            <div class="line1">
                <span class="normalText">Updating Cloud Data...</span></div>
            <div class="line2">
                <span class="smallerText">Do not turn off the device.</span></div>
        </div>
    </div>
</body>
</html>

CSS

body
{
    background-color:white;
}
@font-face 
{
    font-family: 'Helvetica';    
    src: url('DroidSans.ttf') format('truetype');
}
@font-face 
{
    font-family: 'Helvetica';    
    font-weight: bold;
    src: url('DroidSans-Bold.ttf') format('truetype');
}
.normalText
{
    font-family: Helvetica;
    font-size: 36px;
    color: black;
    font-weight: bold;
}
.smallerText
{
    font-family: Helvetica;
    font-size: 20px;
    color: red;
}    
.line1
{
    margin-top:0px;
}
.line2
{
    margin-top:0px;
}
#message
{   
    margin-left:auto;
    margin-right:auto;
    width:50%;
}
#gifElement
{   
    border:0px;
    padding:0px;
    float:left;
    width: 50%;
}
#messageText
{   
    float: left;
    width: 40%;
    margin-top:0px;
    margin-left:0px;
    border:0px;
    padding:0px;
}