JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title></title>
    <link href="base.css" rel="stylesheet" type="text/css" />
    <link href="accordion.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="accordion.js"></script>
</head>
<body>
<div id="wrap">
    <div id="accordion">
        <h3 class="head">Листогибочное оборудование</h3>
        <div class="big_blocks">
<div class="blocks_littles">
<p>Листогибочные прессы</p>
<img src="../upload/test_metall/list_press.jpg" alt="" width="100" height="137" /> 
<ul>
<li><a href="../catalog/category/press_phe/">DENER MAKINA</a></li>
<li>AMADA</li>
</ul>
</div>
<div class="blocks_littles">
<p>Листогибочные машины</p>
<img src="../upload/test_metall/listabgib_mash.jpg" alt="" width="100" height="137" /> 
<ul>
<li>IMCAR</li>
<li><a href="../catalog/category/918/">HACO</a></li>
<li><a href="../catalog/category/bendmak/">BENDMAK</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Листогибочный инструмент</p>
<img src="../upload/test_metall/list_s_pov_balk.jpg" alt="" width="100" height="137" /> 
<ul>
<li><a href="../catalog/category/641/">ROLLERI</a></li>
<li>EURAM</li>
<li>EUROSTAMP</li>
</ul>
</div>
<div class="blocks_littles">
<p>Листогибы с поворотной балкой</p>
<img src="../upload/test_metall/s_pov_balk.jpg" alt="" width="100" height="137" /> 
<ul>
<span>Ручные:</span><br />
<li><a href="../catalog/category/listogiby_ruchnye/">AYSANMAK</a></li>
<br /> <span>Электрические:</span><br />
<li><a href="../catalog/category/jordi/">DENER MAKINA</a></li>
</ul>
</div>
<div class="blocks_littles">
<p>Прoбивочный инструмент</p>
<img src="../upload/test_metall/prib_instrum.jpg" alt="" width="100" height="137" /> 
<ul>
<li><a href="../catalog/category/634/">SU.CE</a></li>
</ul>
</div>
</div>
        
        <h3 class="head">Металлорежущее оборудование</h3>
        <div class="big_blocks">
<div...

CSS

#wrap { width: 100%; margin: 200px auto; }
#accordion h3.head
{ 
    margin: 1px 0; padding: 5px 10px;
    clear: left;
    color: #A52A2A;
    font-size: 20px;
    font-weight:normal;
    padding:0px;
    text-align: center;
    cursor: pointer;
    
    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
    /*text-shadow: 1px 1px 0px #000;
    -o-text-shadow: 1px 1px 0px #000;
    -moz-text-shadow: 1px 1px 0px #000;
    -webkit-text-shadow: 1px 1px 0px #000;*/
}

#accordion h3.active
{
    background: #CCCCCC; 
}

#accordion div.big_blocks
{
    padding: 10px; margin: 0;

    border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;    
      box-shadow: 3px 1px 4px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 /* background: none repeat scroll 0 0 #EFEFEF;*/

    float: left;
    margin: 5px 5px 5px 0;
     padding: 10px 0 20px 20px;
    width: 98%;
}

  #accordion div.big_blocks ul{/*стиль li наследуется стандартно*/
font-size: 15px;
margin-left: 100px; 
text-align: left;
margin-top: 13px;
}
#accordion div.big_blocks ul span{
color: #005058;
    font-size: 17px;
    margin-left: -31px;
}
#accordion div.big_blocks ul li{
line-height:-0.7pxpx;
}
#accordion div.blocks_littles{
     float: left;
    height: 187px;
    margin: 10px 10px 0px 0;
    padding: 5px;
    width: 260px;
    background:#ffffff;
    border: 1px dashed #CCCCCC;
   
}
#accordion div.blocks_littles p{
 color: #005058;
    font-size: 18px;
    font-weight: normal;
    margin: -2px;
  padding: 0 0 4px 4px;
   text-align: center;
    line-height: normal;
    <!-- border-bottom: 1px solid #CCCCCC;-->
     
}
#accordion div.blocks_littles img{
      float: left;
    margin: 9px 4px;
padding:3px 2px -1px 5px;
/*border: 1px dashed #CCCCCC;*/
}

JavaScript

// Когда страница полностью загружена
$(window).ready(function()
{
// запоминаем высоту и отступы каждого блока
$('#accordion > div').each(function()
{
$(this).data('height', $(this).height());
$(this).data('padding-top', $(this).css('padding-top'));
$(this).data('padding-bottom', $(this).css('padding-bottom'));
});

// Скрываем все секции кроме первой
$('#accordion > div:not(:first)').hide();
// Делаем первую секцию активной
$('#accordion h3:first, #accordion div:first').addClass('active');
// Если пользователь кликнул на секцию
$('#accordion > h3').click(function()
{
// Сбрасываем все секции
$('#accordion > h3').removeClass('active');
$('#accordion > div:visible').animate({height: 0, 'padding-top': 0, 'padding-bottom': 0}, 500, function() { $(this).hide() } );

// Делаем активной на которую кликнули
$(this).addClass('active');
box = $(this).next().addClass('active');
$(box).animate(
{
height: $(box).data('height'), 
'padding-top': $(box).data('padding-top'), 
'padding-bottom': $(box).data('padding-bottom')
}, 500);
});
});