I have added the social links to my blog. The links are rendered in a react component called SocialLinks. At the moment I have hand-coded the list but in future I will make this more dynamic.

import React from "react";

export default function SocialLinks() {
  return (
    <div className="social-links">
      <div className="social-links-header">
        <h4>Follow me</h4>
      </div>
      <div className="social-links-list" role="list">
        <div className="social-link twitter" role="listitem">
          <a target="_blank" href="https://twitter.com/MuncePhilip?ref_src=twsrc%5Etfw" className="twitter-follow-button" data-size="large" data-show-count="false">
          <i class="bi bi-twitter"></i> Twitter
          </a>
        </div>
        <div className="social-link github" role="listitem">
          <a target="_blank" href="https://github.com/muncey">
            <i class="bi bi-github"></i> GitHub
          </a>
        </div>
      </div>
    </div>
  );
}

For styling of the list I am using flex box to render a flex column.

.social-links {
  display: flex;
  flex-direction: column;
}

.social-links-header h4 {
  font-size: 0.9em;
}

.social-links-list {
  background-color: white;
  border: 1px #c3c3c3 dashed;
  padding: 5px;
}

.social-link {
  font-size: 0.9em;
  padding: 5px;
}

.social-link a {
  text-decoration: none;
}