<div class="max-w-md mx-auto">

    <div class="max-w-md mx-auto grid grid-cols-2 gap-4">
  
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Blue 
      </button>
    
      <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
        Green 
      </button>
    
      <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
        Red 
      </button>
    
    
      <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
        Purple 
      </button>
    
      <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
        Indigo 
      </button>
    
      <button class="bg-pink-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">
        Pink 
      </button>
    
      <button class="bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-4 rounded">
        Teal 
      </button>
    
    
      <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
        Gray 
      </button>
    
    </div>
  </div>
  

/* Your CSS content goes here */

// Your JavaScript content goes here