JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid bg-warning">
  <div class="row justify-content-center">
    <div class="col-xs-12 col-md-8">
      <div class="container-fluid bg-danger">
        <div class="row">
          <ul class="nav nav-pills justify-content-center">
            <div class="col-xs-3 col-md-2 col-lg-1">
              <li class="nav-item justify-content-center">
                <a class="nav-link text-center" href="{% url ref %}">
                  <img src="{% static img %}" width='50' height='50'><p>Главная</p></a>
              </li>
            </div>
            <div class="col-xs-3 col-md-2 col-lg-1">
              <li class="nav-item justify-content-center">
                <a class="nav-link text-center" href="{% url ref %}">
                  <img src="{% static img %}" width='50' height='50'><p>Пицца</p></a>
              </li>
            </div>
            <div class="col-xs-3 col-md-2 col-lg-1">
              <li class="nav-item justify-content-center">
                <a class="nav-link text-center" href="{% url ref %}">
                  <img src="{% static img %}" width='50' height='50'><p>Закуски</p></a>
              </li>
            </div>
            <div class="col-xs-3 col-md-2 col-lg-1">
              <li class="nav-item justify-content-center">
                <a class="nav-link text-center" href="{% url ref %}">
                  <img src="{% static img %}" width='50' height='50'><p>Напитки</p></a>
              </li>
            </div>
            <div class="ms-auto">
              <div class="col-xs-3 col-md-2 col-lg-1">
                <li class="nav-item justify-content-center">
                  <a class="nav-link text-center" href="{% url ref %}">
                    <img src="{% static img %}" width='50'...