treeview-tailwindcss

<ul class="flex">
    <li class="flex flex-col relative text-center space-y-3">
        <div class="bg-blue-100 rounded-lg p-3">COMPANY</div>
      <ul class="flex space-x-3">
        <li class="flex flex-col relative space-y-3">
        <div class="bg-teal-300 rounded-lg p-2">Sales Department</div>
          <ul class="flex space-x-3">
            <li class="flex flex-col relative">
                      <div class="bg-teal-300 rounded-lg p-2">Sub Sales A</div>
            </li>
            <li class="flex flex-col relative">
            <div class="bg-teal-300 rounded-lg p-2">Sub Sales B</div>
            </li>
                        <li class="flex flex-col relative">
            <div class="bg-teal-300 rounded-lg p-2">Sub Sales B</div>
            </li>
          </ul>
        </li>
        <li class="flex flex-col relative space-y-3">
                                <div class="bg-teal-300 rounded-lg">Purchase Dept</div>
                                          <ul class="flex space-x-3">
            <li class="flex flex-col relative">
                      <div class="bg-teal-300 rounded-lg p-2">Sub Sales A</div>
            </li>
            <li class="flex flex-col relative">
            <div class="bg-teal-300 rounded-lg p-2">Sub Sales B</div>
            </li>
                        <li class="flex flex-col relative">
            <div class="bg-teal-300 rounded-lg p-2">Sub Sales B</div>
            </li>
          </ul>

        </li>
        <li class="flex flex-col relative space-y-3">
                      <div class="bg-orange-300 rounded-lg">Controlling</div>
          <ul class="flex">
            <li class="flex flex-col relative">
                                    <div class="bg-orange-200 rounded-lg">Sub-Controlling</div>
            </li>
                        <li class="flex flex-col relative">
                                    <div class="bg-orange-200 rounded-lg">Sub-Controlling</div>
            </li>

            <li class="flex flex-col relative">
                                    <div class="bg-orange-200 rounded-lg">Sub-Controlling</div>
            </li>

            <li class="flex flex-col relative">
                                    <div class="bg-orange-200 rounded-lg">Sub-Controlling</div>
            </li>

            <li class="flex flex-col relative">
                                    <div class="bg-orange-200 rounded-lg">Sub-Controlling</div>
            </li>

            <li class="flex flex-col relative">
                                    <div class="bg-orange-200 rounded-lg">Sub-Controlling with a big ass text</div>
            </li>

          </ul>
        </li>
      </ul>
    </li>
  </ul>