How can I space out elements in a navbar with Tailwind CSS?

I'm new to web development, and I'm using Tailwind to design my webpage. I want to space apart the elements in my navbar, such that 'Corner Hair Salon' is aligned left, Home and Appointments are centered, and 'Sign-In' is aligned right. I still can't figure out how to structure my HTML or CSS to get that result.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex bg-black h-12 items-center space-x-11">
      <nav class="">
        <span>
          <a
            class="text-white text-3xl font-bold hover:text-gray-300 hover:underline"
            href="#"
            >Corner Hair Salon/a
          >
        </span>
        <span>
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Home</a
          >
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >About</a
          >
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Appointments</a
          >
        </span>
        <span>
          <a
            class="text-white text-3xl hover:text-gray-300 hover:underline"
            href="#"
            >Sign-In</a
          >
        </span>
      </nav>
    </div>

photo of my webpage

Solution

Add following classes to nav flex justify-between w-full

<nav class="flex justify-between w-full">

The nav bar is not getting proper width and because of that flex property is also not satisfying the result. And flex property should be applied to parent element which has immediate children items on which flex needs to be applied.

You can learn more about flexbox from CSS Tricks site.

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex bg-black h-12 items-center space-x-11">
  <nav class="flex justify-between w-full">
    <span>
      <a class="text-white text-3xl font-bold hover:text-gray-300 hover:underline" href="#">Corner Hair Salon</a>
    </span>
    <span>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Home</a>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">About</a>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Appointments</a>
    </span>
    <span>
      <a class="text-white text-3xl hover:text-gray-300 hover:underline" href="#">Sign-In</a>
    </span>
  </nav>
</div>