JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div id="overlay" style="position:absolute;">
         
        <div class="content">
    <div class="ball"></div>
    <div class="ball1"></div>
    
</div>



 </div>
    <div id="container" style="display:none;background:#000;height:300px;width:300px;">
    <div class="content-box" >
      <div class="content-box__row content-box__row--no-border">
       <table width="400" border="0" cellpadding="0" cellspacing="0" align="center" class="full" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;">
              <tbody><tr>
                <td width="100%" style="border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px 0px; background-color: rgb(255, 255, 255);" bgcolor="#ffffff" c-style="not3Body">
                        
                  <!-- Start Top -->
                  <div style="display: none" id="element_06621528162254493"><p></p></div>
                  
                  <table width="400" border="0" cellpadding="0" cellspacing="0" align="center" class="mobile" bgcolor="#ffffff" c-style="not3Body" object="drag-module-small" style="background-color: rgb(255, 255, 255);">
                    <tbody><tr>
                      <td width="100%" valign="middle" align="center">
                        
                        <!-- Header Text --> 
                        <table width="350" border="0" cellpadding="0" cellspacing="0" align="center" style="text-align: center; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="fullCenter">
                          <tbody>

                          <tr>
                            <td valign="middle" width="100%" style="text-align: center; font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 32px; color: #3f4345; line-height: 42px; font-weight: 700;" class="fullCenter" t-style="not3Headlines" mc:edit="19" object="text-editable" cu-identify="element_07782116222277369"><div>Get $200 OFF your next order</div></td>
                         ...

CSS

.content {
    width: 800px;
    margin: 0 auto;
    padding-top: 50px;
}
.ball {
    background-color: rgba(0, 0, 0, 0);
    border: 15px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-top: 15px solid rgba(0, 0, 0, 0);
    border-left: 15px solid rgba(0, 0, 0, 0);
    border-radius: 150px;
    box-shadow: 0 0 35px #2187E7;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    -moz-animation: spin 1.5s infinite linear;
    -webkit-animation: spin 1.5s infinite linear;
}
.ball1 {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-top: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187E7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    position: relative;
    top: -110px;
    -moz-animation: spinoff .5s infinite linear;
    -webkit-animation: spinoff .5s infinite linear;
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    };
}

@-moz-keyframes spinoff {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(-360deg);
    };
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    };
}

@-webkit-keyframes spinoff {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    };
}

JavaScript

$(document).ready(function() {
        
        $('#overlay').fadeOut(2000,function(){
            $('#container').fadeIn(1000);
        });
});