JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<section class="unit unit_all-categories">

    <header class="unit__title">
        <h1><?php echo $this->__('All categories'); ?></h1>
    </header>

    <div class="unit__content">
        <ul class="all-categories">

            <li class="item">
                <div class="title"><a href="#">Книги</a></div>
                <a class="miniature" href="#"><img src="<?php echo $this->getSkinUrl('images/thumbs/all-categories__miniature_1.jpg');?>" width="98" height="151" alt=""/></a>
                <div class="sub-categories">

                    <ul class="sub-categories__list">
                        <li><a href="#">Летние каникулы</a></li>
                        <li><a href="#">Художественная литература</a></li>
                        <li><a href="#">Нехудожественная литература</a></li>
                        <li><a href="#">Foreign books</a></li>
                        <li><a href="#">Бизнес-книги</a></li>
                        <li class="no-display"><a href="#">Летние каникулы</a></li>
                        <li class="no-display"><a href="#">Художественная литература</a></li>
                        <li class="no-display"><a href="#">Нехудожественная литература</a></li>
                        <li class="no-display"><a href="#">Foreign books</a></li>
                        <li class="no-display"><a href="#">Бизнес-книги</a></li>

                        <li class="show-all-sub-categories"><span class="pseudo-link"><?php echo $this->__("Show all"); ?></span></li>
                        <li class="hide-all-sub-categories"><span class="pseudo-link"><?php echo $this->__("Hide all"); ?></span></li>
                    </ul>

                </div>
            </li>

        </ul>
    </div>

</section>