Pitchbooking Storybook
Ready for Production

← Back

Logo Grid

Trusted by organisations across the world

Code:

<section class="bg-gradient-to-r from-white via-zinc-50 to-white py-24 px-5 border-b border-zinc-100 grid grid-cols-1 w-full overflow-hidden max-w-full">

  <div class="flex flex-nowrap justify-center items-center">
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/armagh-banbridge-craigavon-council.png" alt="Armagh Banbridge Craigavon Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/english-heritage.png" alt="English Heritage">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/ifa.png" alt="IFA">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/lincolnshire-fa.png" alt="Lincolnshire FA">
        </div>
      
    
  </div>

  <div class="flex flex-nowrap justify-center items-center">
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/norfolk-fa.png" alt="Norfolk FA">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/notts-football-association.png" alt="Notts Football Association">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/oxford-city-council.png" alt="Oxford City Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/the-scotsman.png" alt="The Scotsman">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/wokingham-borough-council.png" alt="Wokingham Borough Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/armagh-banbridge-craigavon-council.png" alt="Armagh Banbridge Craigavon Council">
        </div>
      
    
  </div>

  <div class="flex flex-nowrap justify-center items-center">
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/the-scotsman.png" alt="The Scotsman">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/wokingham-borough-council.png" alt="Wokingham Borough Council">
        </div>
      
    
      
        <h2 class="m-1 p-3 w-[20ch] text-gradient-dark text-xl lg:text-2xl text-center font-bold leading-none tracking-tight">Trusted by organisations across the world</h2>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/armagh-banbridge-craigavon-council.png" alt="Armagh Banbridge Craigavon Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/english-heritage.png" alt="English Heritage">
        </div>
      
    
  </div>

  <div class="flex flex-nowrap justify-center items-center">
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/norfolk-fa.png" alt="Norfolk FA">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/notts-football-association.png" alt="Notts Football Association">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/oxford-city-council.png" alt="Oxford City Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/the-scotsman.png" alt="The Scotsman">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/wokingham-borough-council.png" alt="Wokingham Borough Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/armagh-banbridge-craigavon-council.png" alt="Armagh Banbridge Craigavon Council">
        </div>
      
    
  </div>

  <div class="flex flex-nowrap justify-center items-center">
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial hidden lg:inline-flex">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/armagh-banbridge-craigavon-council.png" alt="Armagh Banbridge Craigavon Council">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/english-heritage.png" alt="English Heritage">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/ifa.png" alt="IFA">
        </div>
      
    
      
        <div class="card--logo m-1 flex-1 lg:flex-initial ">
          <img class="h-10 lg:16 w-auto max-w-none" src="/assets/images/logos/lincolnshire-fa.png" alt="Lincolnshire FA">
        </div>
      
    
  </div>

</section>