Footer

<footer class="bg-white py-6 md:pt-10" role="contentinfo">
  <div class="grid grid-cols-6 gap-4 px-6 sm:gap-6 md:grid-cols-12">
    <div class="col-span-6">
      <a href="#" class="flex items-center space-x-2">
        <img src="https://composedui.com/images/logo.svg" alt="Logo" class="h-10 w-10 shrink-0" />
        <span class="text-sm font-medium">Composed UI</span>
      </a>
    </div>
    <div class="col-span-2">
      <h2 class="text-xs uppercase text-gray-500">Company</h2>
      <ul class="mt-4 space-y-2">
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">About us</a>
        </li>
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Blog</a>
        </li>
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Careers</a>
        </li>
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Contact</a>
        </li>
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Media kit</a>
        </li>
      </ul>
    </div>
    <div class="col-span-2">
      <h2 class="text-xs uppercase text-gray-500">Product</h2>
      <ul class="mt-4 space-y-2">
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Features</a>
        </li>
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Support</a>
        </li>
        <li>
          <a href="#" class="text-sm text-gray-900 hover:text-opacity-70">Roadmap</a>
        </li>
      </ul>
    </div>
    <div class="col-span-2">
      <h2 class="text-xs uppercase text-gray-500">Follow us</h2>
      <ul class="mt-4 space-y-3">
        <li>
          <a href="#" class="flex items-center space-x-2 text-gray-900 hover:text-opacity-70">
            <!-- phosphoricons: fill/twitter-logo -->
            <svg class="h-6 w-6 shrink-0 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
              <path
                d="M245.7,77.7l-30.2,30.1C209.5,177.7,150.5,232,80,232c-14.5,0-26.5-2.3-35.6-6.8-7.3-3.7-10.3-7.6-11.1-8.8a8,8,0,0,1,3.9-11.9c.2-.1,23.8-9.1,39.1-26.4a108.6,108.6,0,0,1-24.7-24.4c-13.7-18.6-28.2-50.9-19.5-99.1a8.1,8.1,0,0,1,5.5-6.2,8,8,0,0,1,8.1,1.9c.3.4,33.6,33.2,74.3,43.8V88a48.3,48.3,0,0,1,48.6-48,48.2,48.2,0,0,1,41,24H240a8,8,0,0,1,7.4,4.9A8.4,8.4,0,0,1,245.7,77.7Z"
              />
            </svg>
            <span class="text-sm">Twitter</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center space-x-2 text-gray-900 hover:text-opacity-70">
            <!-- phosphoricons: fill/instagram-logo -->
            <svg class="h-6 w-6 shrink-0 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
              <circle cx="128" cy="128" r="32"></circle>
              <path
                d="M172,28H84A56,56,0,0,0,28,84v88a56,56,0,0,0,56,56h88a56,56,0,0,0,56-56V84A56,56,0,0,0,172,28ZM128,176a48,48,0,1,1,48-48A48,48,0,0,1,128,176Zm52-88a12,12,0,1,1,12-12A12,12,0,0,1,180,88Z"
              />
            </svg>
            <span class="text-sm">Instagram</span>
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center space-x-2 text-gray-900 hover:text-opacity-70">
            <!-- phosphoricons: fill/linkedin-logo -->
            <svg class="h-6 w-6 shrink-0 text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
              <path
                d="M212,28H44A16,16,0,0,0,28,44V212a16,16,0,0,0,16,16H212a16,16,0,0,0,16-16V44A16,16,0,0,0,212,28ZM96,176a8,8,0,0,1-16,0V112a8,8,0,0,1,16,0ZM88,92a12,12,0,1,1,12-12A12,12,0,0,1,88,92Zm96,84a8,8,0,0,1-16,0V140a20,20,0,0,0-40,0v36a8,8,0,0,1-16,0V112a8,8,0,0,1,15.8-1.8A36,36,0,0,1,184,140Z"
              />
            </svg>
            <span class="text-sm">Linkedin</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</footer>