JSFiddle - React, Tailwind, and code Playground

by pleymo

HTML

<head>

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<script>
    $(document).ready(function(){
 $('.spoiler_links').click(function(){
  $(this).parent().children('div.spoiler_body_2').toggle('normal');
  return false;
 });
});

</script>








<div style="margin-bottom:50px;">


    <a href="" class="spoiler_links"><strong>Программа на 26 марта</strong></a>
    
 <div class="spoiler_body_2">
     
     <div class="module">
         
         <a href="" class="spoiler_links">
             
<div class="module-title">             
    
    10:30 - 12:00 <span class="small">(точное время в описании мастер-класса)</span>          
    </div>
         </a>  
         <div class="spoiler_body_2"> 
             
<div id="indtop3">
<div class="row">
<div class="span9">
<ul class="thumbnails">
    <li class="span3">
    <div class="thumbnail thumbnail-photos-matrix pull-center">
    <div class="mc_pic">                                      
        
            <img src="http://www.artindustry.ru/netcat_files/Image/MC_zil/1.png" />                                     </div>
             
    <div class="caption2 pull-center">
 <a href="#" class="tt">
     <img style="vertical-align: middle;" src="http://www.artindustry.ru/i/info.gif" alt="описание" height="высота" width="20px" /> Лепка овощей
    <span class="tooltip">
    <span class="top">
    </span>
    <span class="middle">
Лепка овощей.<br><br />Уровень - для занятий с детьми от 8 лет. <br><br />26 марта 10:30 - 12:00</span>
    <span class="bottom">
    </span>
    </span>
 </a>
          <div class="company">
Компания "Артефакт"
        </div>
           <div class="author">
Автор: Лариса Шаренко
        </div>
            <div class="author">
<a class="reg_spoiler" href="http://www.artindustry.ru/newsletterq/rbs-registration.html" target="_blank"></a>
        </div>
        </div>

    </div>
    </li>
    <li class="span3">
    <div...

CSS

.spoiler_body_2 {display:none;}
.spoiler_links {cursor:pointer;}


.spoiler_body {
    *background-color: #EDF2F3;
    *border: solid 3px #e9e9e9;
    margin: 25px;
    padding: 5px;
}
.bgcolor_spoiler:hover {
 
}

p.headline_spoiler {
    color: #545656;
   
}
p.month {
    color: #662D92;
    
    margin-bottom: 30px;

}

p.bonus {
    color: #325EE2;
    font-weight: bold;
    font-size: 15px;
}

a.theme_spoiler {
    color: #F61919;
    font-weight: bold;
    font-size: 18px;
    
}
a.theme_spoiler:hover {
    color: #EA9629;
    font-weight: bold;
    
}

p.title_spoiler {
    color: #545656;
    
}
p.margin {
    margin-bottom: 20px;
    
     
}

a.reg_spoiler {
    background: url(http://artindustry.ru/netcat_files/Image/reg_main.png);
    display: block;
    width: 122px;
    height: 30px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    
}
a.reg_spoiler:hover {
    background: url(http://artindustry.ru/netcat_files/Image/reg_hover.png);
    display: block;
    width: 122px;
    height: 30px;
}
a.reg_spoiler:active {
    background: url(http://artindustry.ru/netcat_files/Image/reg_active.png);
    display: block;
    width: 122px;
    height: 30px;
}

a.spoiler_links {
   
    font-style: bold;
    margin-bottom: 30px;
}

hr {
    border: none; /* Убираем границу */
    background-color: #ACACAC; /* Цвет линии */
    color: #ACACAC; /* Цвет линии для IE6-7 */
    height: 2px; /* Толщина линии */
   }






.module {
    margin: 0;
    padding: 5px 0;
}




.module .module-title {
    background-color: #FFFFFF;
    background-image: linear-gradient(to right, #DDDDDD, #FFFFFF);
    background-repeat: repeat-x;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    font-size: 20px;
    font-weight: bold;
    line-height: 36px;
    margin-bottom: 10px;
    padding: 5px 0 5px 10px;
    color: #333333;
}




.small {
    
font-size: 14px;   
margin-left: 20px;
    color:...