JSFiddle - React, Tailwind, and code Playground

by hibinyru

HTML

<div style="float:left; padding:10px 10px 0px 10px;">
    <div class="box2"><span id="timer">text</span></div>
    <div class="box">
      <img name="foto" src="/images/2020/weather/icons/aurora/load.gif">
    </div>
  </div>

CSS

.box2 {
   position: relative;
   top: 10px;
   left: 220px;
   z-Index:8;
   background: #FFFFFF;
   width:130px;
   height:20px;
   padding:5px 10px 5px 10px;
   text-align:center;
   border-radius: 5px;
   border: 1px solid #e1e1e1;
   }
.box {
   top: -30px;
   z-Index:1;
   position: relative;
   overflow:hidden;
   width:600px;
   height:400px;
   border-radius: 5px;
   border: 1px solid #e1e1e1;
   }
.box img {
   position: absolute;
   top:70%;
   left:120%;
   transform: scale(2.5,2.5) translate(-50%,-50%) rotate(140deg);
   width:600px;
   height:600px;
    object-fit:cover;
  }

JavaScript

var Pic = new Array();
var Time = new Array();

      Pic[1] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1730.jpg'
      Time[1] = '06 Ноября 23:30' 
      Pic[2] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1735.jpg'
      Time[2] = '06 Ноября 23:35' 
      Pic[3] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1740.jpg'
      Time[3] = '06 Ноября 23:40' 
      Pic[4] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1745.jpg'
      Time[4] = '06 Ноября 23:45' 
      Pic[5] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1750.jpg'
      Time[5] = '06 Ноября 23:50' 
      Pic[6] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1755.jpg'
      Time[6] = '06 Ноября 23:55' 
      Pic[7] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1800.jpg'
      Time[7] = '07 Ноября 00:00' 
      Pic[8] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1805.jpg'
      Time[8] = '07 Ноября 00:05' 
      Pic[9] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1810.jpg'
      Time[9] = '07 Ноября 00:10' 
      Pic[10] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1815.jpg'
      Time[10] = '07 Ноября 00:15' 
      Pic[11] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1820.jpg'
      Time[11] = '07 Ноября 00:20' 
      Pic[12] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1825.jpg'
      Time[12] = '07 Ноября 00:25' 
      Pic[13] = 'https://services.swpc.noaa.gov/images/animations/ovation/north/aurora_N_2020-11-06_1830.jpg'
      Time[13] = '07 Ноября 00:30' 
      Pic[14] =...