Aligning Content in Tailwind CSS - css

Question

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>

Answer 1

.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