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>Программа на 27 марта</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/7a.JPG" alt="" />                                     </div>
    <div class="caption2 pull-center">  <a class="tt">      <img style="vertical-align: middle;" src="http://www.artindustry.ru/i/info.gif" alt="описание" width="20px" /> Основы валяния     <span class="tooltip">     <span class="top">     </span>     <span class="middle"> Основы сухого и мокрого валяния.<br /><br />Валяние. Все о сухом и мокром валянии, когда и какой способ лучше применять и как совмещать эти две техники. Создание цветов мокрым и сухим способом. <br /><br /> 27 марта 10:30 - 11:30</span>     <span class="bottom">     </span>     </span>  </a>
    <div class="company"> Компания &quot;АРС Хобби&quot;         </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...

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:...