CSS'te pozisyonlama sorunu

Bu sorunu nasıl çözerim? Örneğin aşağıdaki gibi bir kod yazmıştım dün gece. F12 basıp kodun yamulduğunu görünce delirip kapattım. Aslında güzel siteler yapabilme potansiyelim olduğunu düşünüyorum ama şu pozisyonlar çok sıkıntı.

Örneğin <b>TailwindCSS'de</b> şöyle bir <b>"Sunucu Kartları"</b> kodum var:

      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-3/4">
        <div class="bg-[#1e2124] rounded-lg shadow-lg relative">
          <img src="https://picsum.photos/1920/1080" alt="Server Banner" class="w-full object-cover rounded-t-lg">
          <img class="absolute left-0 top-0 transform -translate-x-1/2 -translate-y-1/2 sm:static sm:left-[15vh] sm:top-[-5vh] max-w-[8vh] rounded-2xl" src="https://picsum.photos/256/256" alt="Server Banner">
          <div class="p-4 text-center">
            <h2 class="text-lg font-bold text-white">Sunucu Adı</h2>
            <p class="text-gray-300 font-semibold">Aktif Üye Sayısı: <b class="text-green-500 font-extrabold">124</b></p>
            <p class="text-gray-500">Toplam Üye Sayısı: 500</p>
          </div>
        </div>
      </div>

Kodun çıktısında benim ekranımda sorun yok.
<img src="https://cdn.discordapp.com/attachments/969959961268453456/1114140317701111848/image.png&quot;&gt;

Fakat F12 basınca işler değişiyor. :/
<img src="https://cdn.discordapp.com/attachments/969959961268453456/1114140827774636143/image.png&quot;&gt;

Bu arada kategorilerde Tailwind'i göremedim eklersiniz umarım. Konuya gelirsek, yardımcı olursanız sevinirim.