JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="conteiner"><!-- основной контейнер подключён к бутстрап-->
    <!-- участок кода отвечает за левую панель -->
    <div class="cont lLeft">
   <!--тут таблица, подключение к db, скрипт, кнопочка.-->
    </div>
    <!-- участок кода отвечает за правую панель -->
<div class="cont lRight">
    <div class="conte">
        <!-- Тестовый текст -->
        <div class="nid">
            <div id="oo1" class="k alert alert-info"><b>Текст 0</b></div>
            <div id="oo2" class="k alert alert-info"><b>Текст 1</b></div>
            <div id="oo3" class="k alert alert-info"><b>Текст 2</b></div>
            <div id="oo4" class="k alert alert-info "><b>Текст 3</b></div>
        </div>
     </div>
</div>
</div>

CSS

.conteiner{
    height: 33%;
    background: #fff;
}
 
div.conteiner .lRight{
    float: right;
    width: 30%;
}
div.conteiner .cont{
    width: auto;
    margin: auto;
}
.conte{
    width:400px;
    float: right;
    height: 80px;
    border-radius: 20px;
}
.vis{
    width: 100%;
    height: 80px;
    border-radius: 20px;
    visibility: visible;
}
.nid{
    visibility: hidden;
}
.lLeft{
    float: left;
}

JavaScript

var o78911 = 22;
        if(o78911 == 0){        
            $("#oo1").toggleClass("k vis");
            var timer2 = setInterval(function() {
            $("#oo1").toggleClass("vis k");
            }, 8000);
           setTimeout(function() {clearInterval(timer2);}, 10100)
           }else if(o78911 < 0){
            $("#o2").toggleClass("k vis");
            var timer2 = setInterval(function() {
            $("#o2").toggleClass("vis k");
            }, 8000);
           } else if(o78911 < 5000){
            $("#oo3").toggleClass("k vis");
            var timer2 = setInterval(function() {
            $("#oo3").toggleClass("vis k");
            }, 8000);
           }