JSFiddle - React, Tailwind, and code Playground

by Dmitry Smolyakov

HTML

<h1 id="sitename">CHIIN</h1>
		<h2>Ваше личное руководство!</h2>
		<!--<div class="container">
        	<div class="tabs">
            	<a href=""><span class="active" id="button1">Newest</span></a>
                <a href=""><span id="button2">Oldest</span></a>
                <a href=""><span id="button3">Add</span></a>
            </div>
        </div>-->
		
		<hr>
		<a href="" id="lol">Add</a>
        <div id="kek">sdfsdf</div>
		<p>
			Добро пожаловать в раннюю версию Brackets, нового редактора с открытым исходным 
			кодом для веба следующего поколения. Мы большие фанаты стандартов и хотим построить лучший 
			инструмент для JavaScript, HTML и CSS и связанных с ними открытых веб-технологий. Это наше 
			скромное начало.
		</p>
		<hr>
		       
        <div class="text">
            <div id="replace"></div>
        
        <div id="div1">
            
            
            <em>Во многих отношениях, Brackets необычный редактор.</em> 
            kjk.
        </div>
        
        <div id="div2">
        штани за 40 гривень
        </div>
        
        <div id="div3">
        yoooop kek
        </div>
		</div>
        
        <div id = "text"></div>
    <section class="boxclass">
        <div id="box">
            <div class="open1">open</div>
            <div class="showpanel">This is content</div>

            <div class="open2">open</div>
            <div class="showpane2">This is content</div>
         
     </div>
     <div id ="box1">
        	<div class="tabs">
            	<a href=""><span class="active" id="button1">Newest</span></a>
                <a href=""><span id="button2">Oldest</span></a>
                <a href=""><span id="button3">Add</span></a>
            </div>
     </div>
                
    </section>

CSS

html {
    background-color: #e6e9e9;
    background-image: 270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%;
    background-image: 270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
    
}

body {
    margin: 0 auto;
    padding: 1em 2em 2em;
    max-width:80%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    color: #545454;
    background-color: #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
}

h1,h2, h3, h4, h5, h6 {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
}

h2 {
    text-align: center;
    margin-top: 1.3em;
}

a {
    color: #0083e8; 
}

b, strong {
    font-weight: 600;
}

samp {
    display: none;
}

img {
    background: transparent;
    border: 10px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
    margin: 1.3em auto;
    max-width: 95%;
}



#sitename {
    color: #222;
    font-weight: 600;
    line-height: 1.3em;
    text-align: center;
    font-size: 70px;
}



.tabs a span {
    border-radius: 5px 5px 0 0;
    display: inline-block;
    width: 100px;
    margin-right: 0em;
    text-align: center;
    background: #ddd;
    padding: 5px;
}
.tabs a .active {
    background-color: #ee1;
}

#div1, #div2, #div3{
    display: none;
}
.boxclass{
    max-width:80%;
}
#box{
    
    border:2px solid #000;
    width:50%;
    min-height:310px;
    float:left;
}
#box1{
    
    
    border:2px solid #000;
    width:50%;
    min-height:310px;; 
    float:right;

    min-height:310px;
    
    
}
.open1, .open2 {
    width:100%;
    height:50px;
    background:#1aa;
    margin:0px auto 0 auto;
    color:#fff;
    

    
    }
.showpanel,.showpane2{
    width:100%;
    height:200px;
    margin:0 auto 10px auto;
    background:#ae8;
    display:none;

}
#div1 { display: none;}
#div2 { display: none;}
#div3 { display: none;}
#kek{
    display: none;
}

JavaScript

var main = function(){
    "use strict";
    
       

    
    
     $(".tabs a span ").toArray().forEach(function(element){
         /*var $td = $(element);
         $td.on("click",function(){
             $(".container table td").removeClass("active");
             $td.hide();
             $tb.addClass("active");
             $td.fadeIn();
             
             return false;*/  
        $(element).on("click", function (){
        $(element).hide();
            
        $(".tabs a span").removeClass("active"); 
        $(element).addClass("active");
        
        $(element).fadeIn();       
           return false;
        });
         
         
         
         
    });
   
      //!!!!!!!!!!!!!!!!!!!!  
    

       
       
            $("#button1").on("click",function(){       
                if ($("#div1").css("display") == "none") 
                {    
                    
                    
                    $("#div1").animate({height: "show"}, 500); 
                } 
                else 
                {     
                  $("#div1").animate({height: "hide"}, 500);
                }
                    return false;             
            });
          
            $("#button2").click(function(){ 
                if($("#div2").css("display") == "none"){
                   
                    $("#div2").animate({height: "show"}, 500);
                }
                else
                {
                    $("#div2").animate({height: "hide"}, 500);
                }
                    return false;
                
            }); 
            $("#button3").click(function(){                                   
                if($("#div3").css("display") == "none"){
                   
                    $("#div3").animate({height: "show"}, 500);
                }
                else
                {
                    $("#div3").animate({height: "hide"}, 500);
                }
                    return false;
      ...