<body>
  <div id="tbcover">
    <div id="toolbar">
      <div id="tbitem1"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit-circle" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M12 15l8.385 -8.415a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3z" />
          <path d="M16 5l3 3" />
          <path d="M9 7.07a7.002 7.002 0 0 0 1 13.93a7.002 7.002 0 0 0 6.929 -5.999" />
        </svg>
          <br>Blog
        </div>
      <div id="tbitem2"><svg width="32px" enable-background="new 0 0 500 500" id="Layer_1" version="1.1" viewBox="0 0 500 500" fill="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <g>
            <g>
              <path d="M414.3,414.8H85.7V86.2h328.5V414.8z M113.1,387.4h273.8V113.6H113.1V387.4z" />
            </g>
            <g>
              <path d="M155.1,264v41.3h-22.8V197.8h31.3c14.6,0,25.4,2.7,32.4,8c7,5.3,10.5,13.4,10.5,24.2c0,6.3-1.7,12-5.2,16.9    c-3.5,4.9-8.4,8.8-14.8,11.6c16.2,24.2,26.7,39.8,31.6,46.8h-25.3L167.3,264H155.1z M155.1,245.5h7.4c7.2,0,12.5-1.2,15.9-3.6    c3.4-2.4,5.2-6.2,5.2-11.3c0-5.1-1.8-8.7-5.3-10.9c-3.5-2.2-8.9-3.2-16.3-3.2h-6.9V245.5z" />
              <path d="M259.7,306.7c-13.2,0-23.6-3.6-31-11c-7.4-7.3-11.2-17.6-11.2-31c0-13.8,3.4-24.4,10.3-31.9c6.9-7.5,16.4-11.3,28.6-11.3    c11.6,0,20.7,3.3,27.1,9.9c6.5,6.6,9.7,15.8,9.7,27.4v10.9h-53c0.2,6.4,2.1,11.3,5.7,14.9c3.5,3.6,8.5,5.4,14.9,5.4    c4.9,0,9.6-0.5,14-1.6c4.4-1,9-2.7,13.8-4.9v17.4c-3.9,2-8.1,3.4-12.6,4.4C271.5,306.2,266.1,306.7,259.7,306.7z M256.5,237.5    c-4.7,0-8.5,1.5-11.2,4.5c-2.7,3-4.2,7.3-4.6,12.8h31.5c-0.1-5.5-1.6-9.8-4.3-12.8C265,239,261.2,237.5,256.5,237.5z" />
              <path d="M367.2,280.8c0,8.4-2.9,14.9-8.8,19.3c-5.9,4.4-14.6,6.6-26.3,6.6c-6,0-11.1-0.4-15.3-1.2c-4.2-0.8-8.2-2-11.8-3.6v-18.5    c4.2,2,8.9,3.6,14.1,4.9c5.2,1.3,9.8,2,13.8,2c8.1,0,12.2-2.4,12.2-7.1c0-1.8-0.5-3.2-1.6-4.3c-1.1-1.1-2.9-2.4-5.6-3.8    c-2.6-1.4-6.2-3-10.6-4.9c-6.3-2.6-11-5.1-13.9-7.4c-3-2.3-5.1-4.9-6.5-7.8s-2-6.5-2-10.8c0-7.3,2.8-13,8.5-16.9    c5.7-4,13.7-6,24.1-6c9.9,0,19.5,2.2,28.9,6.5l-6.8,16.2c-4.1-1.8-8-3.2-11.5-4.3c-3.6-1.1-7.2-1.7-10.9-1.7    c-6.6,0-9.9,1.8-9.9,5.4c0,2,1.1,3.7,3.2,5.2c2.1,1.5,6.8,3.7,14,6.5c6.4,2.6,11.1,5,14.1,7.3c3,2.3,5.2,4.9,6.6,7.8    C366.5,273.3,367.2,276.8,367.2,280.8z" />
            </g>
          </g>
        </svg>
          <br>Resources
        </div>
      <div id="tbitem3"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-coin" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#bd8f4d" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <circle cx="12" cy="12" r="9" />
          <path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1 -1.8 -1" />
          <path d="M12 6v2m0 8v2" />
        </svg>
          <br>Hire/Donate
        </div>
      <div id="tbitem4"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-device-laptop" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ff0000" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <line x1="3" y1="19" x2="21" y2="19" />
          <rect x="5" y="6" width="14" height="10" rx="1" />
        </svg>
          <br>MyWorks
        </div>
      <div id="tbitem5"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-social" width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <circle cx="12" cy="5" r="2" />
          <circle cx="5" cy="19" r="2" />
          <circle cx="19" cy="19" r="2" />
          <circle cx="12" cy="14" r="3" />
          <line x1="12" y1="7" x2="12" y2="11" />
          <line x1="6.7" y1="17.8" x2="9.5" y2="15.8" />
          <line x1="17.3" y1="17.8" x2="14.5" y2="15.8" />
        </svg>
          <br>SNS IDs
        </div>
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac blandit mauris. Nullam eget est sollicitudin eros lobortis dignissim. Maecenas mollis convallis fermentum. Curabitur cursus, neque id fringilla scelerisque, magna dui ultrices erat, at mollis odio purus nec ante. Fusce pretium maximus nisl. Vivamus blandit maximus elit et sagittis. Sed molestie nisl sagittis, suscipit purus in, volutpat tellus. Ut rhoncus nulla eu arcu porttitor consectetur. Sed aliquam tortor id orci fermentum, eget ullamcorper ipsum aliquet. Nunc ut nulla a velit sagittis pellentesque quis ac mi. Suspendisse sit amet odio ac purus luctus viverra nec sit amet velit. Vestibulum maximus nulla eros, ac gravida sapien euismod et.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec massa tempus, finibus nisi vitae, tempor lorem. Vestibulum efficitur sapien non nisi luctus ornare. Ut sit amet bibendum ante. Maecenas quis dapibus ligula, in interdum risus. Morbi eleifend id felis vel congue. Aenean eu ultrices nisi. Cras ac dolor sed purus scelerisque molestie. Sed malesuada tempor consectetur. Proin volutpat, quam et efficitur pulvinar, dolor elit egestas libero, et dictum ante ipsum sit amet erat. Ut mollis feugiat libero ac facilisis. Aliquam at velit magna. In sit amet lectus eu dui malesuada viverra quis a felis. Maecenas porttitor, velit molestie viverra tempus, eros nisi faucibus nisl, a tempus lorem nunc sit amet ipsum. Nunc tristique lacus vitae facilisis laoreet. Pellentesque eleifend a turpis quis consequat.
  </p>
  <p>
    Vivamus venenatis sagittis odio. Donec vel interdum leo. Proin et gravida nibh. Curabitur aliquet dignissim urna in vehicula. Praesent a laoreet eros. Vestibulum ultricies risus a arcu tincidunt, a luctus turpis tempus. Mauris eu dui quis quam feugiat tincidunt sed eu est. In in quam sit amet nulla mattis porta. Suspendisse dictum elit nulla, quis imperdiet erat faucibus sit amet. Aenean et sapien diam.</p>

  <p>Praesent magna mauris, finibus at orci a, auctor vestibulum enim. Aenean sed ante id metus interdum placerat. Donec finibus semper blandit. Phasellus condimentum, tellus in euismod scelerisque, nulla justo fringilla risus, eu pharetra nisl ipsum et magna. Duis ut tellus et justo ultricies faucibus eget ac magna. Nulla posuere vulputate sem et laoreet. Cras convallis dapibus nulla, et tristique magna. Integer posuere turpis at purus maximus maximus. Curabitur dui ipsum, dapibus sed nibh in, tincidunt sodales sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla blandit erat quis diam molestie, vitae maximus tortor aliquam. Nunc scelerisque neque sit amet neque molestie, in sodales purus sollicitudin. Suspendisse euismod elit non nibh accumsan cursus. Nunc eget arcu imperdiet lorem vulputate sollicitudin ac a sapien. Suspendisse potenti. Phasellus vel ante eu ipsum vulputate maximus vel in augue.</p>

   <p> Phasellus sagittis orci odio, et cursus mauris tempus id. Vivamus nec euismod tortor, semper lobortis dolor. Sed tempor posuere pulvinar. Ut at augue diam. Nam risus massa, ornare nec justo vel, dictum ultricies velit. Vivamus sed maximus mi. Nunc quis tincidunt lacus. Maecenas volutpat urna et lorem aliquet, vel sodales augue rhoncus. Etiam feugiat turpis ligula, eu tempus eros gravida id. Nunc efficitur pellentesque faucibus. Proin a rutrum turpis. Duis pellentesque vel velit eu vehicula. Pellentesque ornare erat quis risus mollis aliquet. Suspendisse ut orci at tellus lacinia faucibus id et tellus. Donec tincidunt elit nec odio cursus mollis.
  </p>
</body>
body {
  padding: 0px;
  margin: 0px auto;
   background: linear-gradient(to right ,#ee9ca7, #ffdde1);
}
body p{padding: 10px;font-size:24px;}
/* main content below */
#tbcover {
  position: fixed;
  bottom: 5px;
  width: 100vw;
  padding: 0px;
  /*background: #ff0000; FOR TESTING */
}
#toolbar {
  display: block;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  text-align: center;
  width: 340px;
  max-width: 99vw;
  /*after calculating width of inside elyments with margin and padding plus some extra width */
  height: auto;
  padding: 0px;
  margin: 0px auto;
  bottom: 5px;
  border-radius: 23px;
}
#toolbar div {
  display: inline-block;
  margin: 8px 5px;
  font-size: 10px;
}
#toolbar svg:hover{transform: scaleY(1.5) scaleX(1.5)}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.