Aligning Content in Tailwind CSS

Gray Singh

I need to align the image and the Orange and fruit on the center. How will I do it the proper and correct way. It needs to align together with others.

Check my playground here CLICK HERE

expected output

<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
  <div class="flex flex-col w-full p-12">
    <div class="flex flex-col w-full text-center items-center">
      <div class="btc">
        <button class="btn btn-back">Back</button>
        <div class="flex gap-4">
          <img src="https://picsum.photos/200/300" class="w-12 h-12" />
          <div class="text-left text-white">
            <p class="font-bold">Orange</p>
            <p class="text-grey">fruit</p>
          </div>
        </div>
      </div>
      <h1 class="text-4xl text-white mb-5">
        <span class="text-sm font-bold">Food</span>
      </h1>

      <div class="flex flex-row mt-8 gap-4">
        <button class="btn btn-primary">Send Food</button>
        <button class="btn btn-yellow">Receive Food</button>
      </div>

      <div class="flex flex-row mt-8 mb-16">
        <button class="btn btn-change flex justify-center items-center">
          <span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
          <span>Change Food</span>
        </button>
      </div>
    </div>
  </div>
</div>

Aravind Prabash

.btc {
  @apply w-full mb-16;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: auto;
  justify-content: center;
  position: relative;
}

.btn {
  @apply text-white text-sm bg-transparent font-normal rounded-full border-2 h-10 w-52;
}

.btn-back {
  @apply border-green-500 w-24;
}

.btn-primary {
  @apply border-red-700;
}

.btn-yellow {
  @apply border-yellow-300;
}

.btn-change {
  @apply bg-blue-300 border-0 font-bold;
}

.btn-class {
  position: absolute;
  left: 0;
  top: 0;
}

<div class="bg-black overflow-auto h-screen pb-24 px-4 md:px-6">
  <div class="flex flex-col w-full p-12">
    <div class="flex flex-col w-full text-center items-center">
      <div class="btc">
        <button class="btn btn-back btn-class">Back</button>
        <div class="flex gap-4 new-div-class">
          <img src="https://picsum.photos/200/300" class="w-12 h-12" />
          <div class="text-left text-white">
            <p class="font-bold">Orange</p>
            <p class="text-grey">fruit</p>
          </div>
        </div>
      </div>
      <h1 class="text-4xl text-white mb-5">
        <span class="text-sm font-bold">Food</span>
      </h1>

      <div class="flex flex-row mt-8 gap-4">
        <button class="btn btn-primary">Send Food</button>
        <button class="btn btn-yellow">Receive Food</button>
      </div>

      <div class="flex flex-row mt-8 mb-16">
        <button class="btn btn-change flex justify-center items-center">
          <span class="w-5 h-5 bg-blue-button-bg rounded-full mr-2"></span>
          <span>Change Food</span>
        </button>
      </div>
    </div>
  </div>
</div>

I have edited your play. Here is the new link https://play.tailwindcss.com/qrDlxDYWW3