JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="navbar navbar-expand-xl navbar-toggleable-md navbar-light bg-white" id="nav1">
    <div class="navbar-collapse collapse w-100 order-1 dual-collapse2">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item home">
                <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/">HOME <span class="sr-only">(current)</span></a> </li>
    <li class="nav-item"> <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/wedding_sicily_our_weddings.html">OUR WEDDINGS</a> </li>
        </ul>
    </div>
    <div class="mx-auto order-0 order-xl-2">
     <a class="navbar-brand mx-auto logo" href="/"><img src="Imagine/00 Top Logo 2021.png" alt="Logo 2021" width="275" height="127"></a></div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav mx-auto">
            <li class="nav-item">
    <li class="nav-item"> <a class="nav-link" href="#"><a href="https://www.weddinginsicily.co.uk/wedding_sicily_legalities.html">LEGALITIES</a> </li>
        </ul>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

CSS

.logo {
  border: 1px solid red;
  position: relative;
  
}
.navbar-toggler {
  border: 1px solid red;
  position: absolute;
  right: 20px;
}