Tailwind footer

Responsive footers built with Tailwind. Footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.

Basic footer

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


  <!-- Required font awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
  
  <footer class="text-gray-600 body-font">
    <div
      class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
      <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
        <a href="" class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
          <i class="fas fa-cubes fa-lg text-purple-500"></i>
          <span class="ml-3 text-xl">Tailwind elements</span>
        </a>
        <p class="mt-2 text-sm text-gray-500">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi,
          quam?</p>
      </div>
      <div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
            </li>
          </nav>
        </div>
        <div class="lg:w-1/4 md:w-1/2 w-full px-4">
          <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
          <nav class="list-none mb-10">
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
            </li>
            <li>
              <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
            </li>
          </nav>
        </div>
      </div>
    </div>
    <div class="bg-gray-100">
      <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
        <p class="text-gray-500 text-sm text-center sm:text-left">© 2021 Copyright:
          <a href="https://www.tailwind-elements.com/" class="text-gray-600 ml-1" target="_blank">Tailwind
            Elements</a>
        </p>
        <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
          <a href="" class="text-gray-500">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="" class="ml-3 text-gray-500">
            <i class="fab fa-twitter"></i>
          </a>
          <a href="" class="ml-3 text-gray-500">
            <i class="fab fa-linkedin-in"></i>
          </a>
          <a href="" class="ml-3 text-gray-500">
            <i class="fab fa-youtube"></i>
          </a>
          <a href="" class="ml-3 text-gray-500">
            <i class="fab fa-instagram"></i>
          </a>
        </span>
      </div>
    </div>
  </footer>

  

Basic footer v.2

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


    <!-- Required font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    
    <footer class="text-gray-600 body-font">
      <div
        class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
        <div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
          <div class="lg:w-1/4 md:w-1/2 w-full px-4">
            <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
            <nav class="list-none mb-10">
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
              </li>
            </nav>
          </div>
          <div class="lg:w-1/4 md:w-1/2 w-full px-4">
            <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
            <nav class="list-none mb-10">
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
              </li>
            </nav>
          </div>
          <div class="lg:w-1/4 md:w-1/2 w-full px-4">
            <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
            <nav class="list-none mb-10">
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
              </li>
            </nav>
          </div>
          <div class="lg:w-1/4 md:w-1/2 w-full px-4">
            <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
            <nav class="list-none mb-10">
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">First Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Second Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Third Link</a>
              </li>
              <li>
                <a href="" class="text-gray-600 hover:text-gray-800">Fourth Link</a>
              </li>
            </nav>
          </div>
        </div>
        <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
          <a href="" class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
            <i class="fas fa-cubes fa-lg text-purple-500"></i>
            <span class="ml-3 text-xl">Tailwind elements</span>
          </a>
          <p class="mt-2 text-sm text-gray-500">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi,
            quam?</p>
        </div>
      </div>
      <div class="bg-gray-100">
        <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
          <p class="text-gray-500 text-sm text-center sm:text-left">© 2021 Copyright:
            <a href="https://www.tailwind-elements.com/" class="text-gray-600 ml-1" target="_blank">Tailwind
              Elements</a>
          </p>
          <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
            <a href="" class="text-gray-500">
              <i class="fab fa-facebook-f"></i>
            </a>
            <a href="" class="ml-3 text-gray-500">
              <i class="fab fa-twitter"></i>
            </a>
            <a href="" class="ml-3 text-gray-500">
              <i class="fab fa-linkedin-in"></i>
            </a>
            <a href="" class="ml-3 text-gray-500">
              <i class="fab fa-youtube"></i>
            </a>
            <a href="" class="ml-3 text-gray-500">
              <i class="fab fa-instagram"></i>
            </a>
          </span>
        </div>
      </div>
    </footer>
  
  