JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css">
<nav class="menu">
                    <ul>
                        <li>
                            <a href="#">Data Management</a>
                                <p>
                                    Hello
                                    <button class="btn btn-sm btn-secondary dropdown-toggle" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Сменить
                                    </button>
                                    <span class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                        <a href="#" class="dropdown-item">На лидера</a>
                                        <a href="#" class="dropdown-item">На законодателя</a>
                                        <a href="#" class="dropdown-item">На аналитика</a>
                                        <a href="#" class="dropdown-item">На тренера</a>
                                    </span> 
                                </p> 
                        </li>
                        <li>
                            <a href="#">Data Management</a>
                                <p>
                                    Hello
                                    <button class="btn btn-sm btn-secondary dropdown-toggle" id="dropDownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Сменить
                                    </button>
                                    <span class="dropdown-menu"...