JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<header class="header" style="background-image: url(img/bg_header_img_1.jpg);">
    <div class="header-pannel">
      <div class="container">
        <div class="row">
          <div class="col-md-2">
            <div class="header-logo">
              <a href="#"><span>Liveangle.ru</span></a>
            </div>
          </div>
          <div class="col-md-7">
            <nav class="header-mnu">
              <ul class="sf-menu">
                <li><a href="#">Главная</a></li>
                <li>
                  <a href="#">Все категории <i class="fa fa-angle-right"></i></a>
                  <ul>
                    <li>
                      <a href="#">Животные <i class="fa fa-angle-right"></i></a>
                      <ul>
                        <li>
                          <a href="#">Типы животных <i class="fa fa-angle-right"></i></a>
                          <ul>
                            <li><a href="#">Простейшие</a></li>
                            <li><a href="#">Губки</a></li>
                            <li><a href="#">Кишечнополостные</a></li>
                            <li><a href="#">Черви</a></li>
                            <li><a href="#">Моллюски</a></li>
                            <li><a href="#">Членистоногие</a></li>
                            <li><a href="#">Хордовые</a></li>
                          </ul>
                        </li>
                        <li>
                          <a href="#">Классы животных <i class="fa fa-angle-right"></i></a>
                          <ul>
                            <li><a href="#">Ракообразные</a></li>
                            <li><a href="#">Паукообразные</a></li>
                            <li><a href="#">Насекомые</a></li>
                            <li><a href="#">Млекопитающие</a></li>
                            <li><a href="#">Птицы</a></li>
                            <li><a href="#">Пресмыкающиеся</a></li>
                            <li><a...