<div class="container mx-auto">
      <h1 class="text-center text-xl font-bold mb-1" >Sporcularımız</h1>  
        <div class="grid justify-items-center grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-1">
          <div class="relative">
          <div class="group flex-col ">
            <img src="logo.png" alt="Üye Resmi" className="w-full h-auto" />
            <h2 class="text-center font-bold mb-1">Sporcu Adı Soyadı</h2>
            <h3 class="text-center font-bold mb-1">+12 Oyuncu</h3>
            <div class="absolute bg-gray-900 text-white p-2 rounded-lg opacity-0 invisible transition-opacity duration-300 group-hover:opacity-100 group-hover:visible">
              <h2 class="font-bold mb-1">Adı Soyadı</h2>
              <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices lectus sit amet tortor malesuada tristique.</p>
            </div>
          </div>
          </div>
          <div class="relative">
          <div class="group flex-col ">
            <img src="logo.png" alt="Üye Resmi" className="w-full h-auto" />
            <h2 class="text-center font-bold mb-1">Sporcu Adı Soyadı</h2>
            <h3 class="text-center font-bold mb-1">+12 Oyuncu</h3>
            <div class="absolute bg-gray-900 text-white p-2 rounded-lg opacity-0 invisible transition-opacity duration-300 group-hover:opacity-100 group-hover:visible">
              <h2 class="font-bold mb-1">Adı Soyadı</h2>
              <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices lectus sit amet tortor malesuada tristique.</p>
            </div>
          </div>
          </div>
          <div class="relative">
          <div class="group flex-col ">
            <img src="logo.png" alt="Üye Resmi" className="w-full h-auto" />
            <h2 class="text-center font-bold mb-1">Sporcu Adı Soyadı</h2>
            <h3 class="text-center font-bold mb-1">+12 Oyuncu</h3>
            <div class="absolute bg-gray-900 text-white p-2 rounded-lg opacity-0 invisible transition-opacity duration-300 group-hover:opacity-100 group-hover:visible">
              <h2 class="font-bold mb-1">Adı Soyadı</h2>
              <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultrices lectus sit amet tortor malesuada tristique.</p>
            </div>
          </div>
          </div>
          
        </div>
      </div>