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-top: 40px;"></div>

<a href="" class="spoiler_links"><img src="http://www.artindustry.ru/netcat_files/Image/MC_zil/reg_main2.gif" />  </a>
    
 <div class="spoiler_body_2">
     
     <div class="module">
         
         
             
<div style="text-align: center;"><span style="font-size: 9pt; line-height: 13.800000190734863px; font-family: Tahoma, sans-serif; color: rgb(51, 51, 51); font-weight: bold;">ДЕЛОВАЯ ПРОГРАММА Форума в виде КОНФЕРЕНЦИИ&nbsp;</span></div>
<div style="text-align: center;"><span style="font-size: 9pt; line-height: 13.800000190734863px; font-family: Tahoma, sans-serif; color: rgb(51, 51, 51); font-weight: bold;">будет проходить два дня 26 и 27 марта!&nbsp;</span></div>
<div style="text-align: center;"><span style="font-size: 9pt; line-height: 13.800000190734863px; font-family: Tahoma, sans-serif; color: rgb(51, 51, 51); font-weight: bold;"><br /></span></div>
<div style="text-align: center;"><span style="font-size: 9pt; line-height: 13.800000190734863px; font-family: Tahoma, sans-serif; color: rgb(51, 51, 51);"><br /></span></div>
<div style="text-align: center;"><span style="font-size: 9pt; line-height: 13.800000190734863px; font-family: Tahoma, sans-serif; color: rgb(51, 51, 51);">На КОНФЕРЕНЦИЮ приглашаются представители администрации и методисты Школ искусств, Художественных школ, Общеобразовательных школ, Частных студий, Педагогических колледжей, Высших учебных заведений, которые оказывают услуги населению, открыв Студии творчества для взрослых.</span></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div>
<div style="text-align: center;"><span style="font-family: Tahoma, sans-serif;...

CSS

/* SPOILER-2 + WINDOW
----------------------------------------------------*/

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


.spoiler_body_2 {
    
    margin: 0px;
    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;
}

.module .module-title_2 {
    background-color:...