JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Website Assessment</title>
    <link type="text/css" href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<!--On-Page Styles -->
<style>
    h2 {
        color: rgba(0, 255, 255, 0.527);
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .grid-2 {
        padding-left: 30px;
        border-left: 1px solid aquamarine;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 20px;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 10%;
    }

    .grid-1 {
        padding-right: 30px;
    }

    img {
        width: 300px;
        height: 168px;
        object-fit: scale-down;
    }

    a {
        text-decoration: none;
        color: white;
        padding-right: 10%;
        padding-top: 10%;
    }

    #social-footer {
        background-color: grey;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid aquamarine;
        display: grid;
        align-items: flex-start;
        justify-content: center;
    }

    #social-footer-headers {
        text-decoration: none;
        color: white;
        text-align: center;
        padding: 20px;
    }

    body {
        margin: 0;
    }

    .fa {
        padding: 15px;
        font-size: 18px;
        width: 10px;
        height: 10px;
        text-align: center;
        text-decoration: none;
        margin-right: 15%;
        align-items: center !important;

    }

    .fa-facebook {
        background: white;
        color: grey;
    }

    .fa-twitter {
        background: white;
        color: grey;
    }
    .fa-linkedin{
        background: white;
        color:grey; 
    }
</style>



<body>
    <header>
    </header>
    <section>
        <div class="wrapper">
            <div...

CSS

h2 {
        color: rgba(0, 255, 255, 0.527);
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .grid-2 {
        padding-left: 30px;
        border-left: 1px solid aquamarine;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 20px;
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 10%;
    }

    .grid-1 {
        padding-right: 30px;
    }

    img {
        width: 300px;
        height: 168px;
        object-fit: scale-down;
    }

    a {
        text-decoration: none;
        color: white;
        padding-right: 10%;
        padding-top: 10%;
    }

    #social-footer {
        background-color: grey;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid aquamarine;
        display: grid;
        align-items: flex-start;
        justify-content: center;
    }

    #social-footer-headers {
        text-decoration: none;
        color: white;
        text-align: center;
        padding: 20px;
    }

    body {
        margin: 0;
    }

    .fa {
        padding: 15px;
        font-size: 18px;
        width: 10px;
        height: 10px;
        text-align: center;
        text-decoration: none;
        margin-right: 15%;
        align-items: center !important;

    }

    .fa-facebook {
        background: white;
        color: grey;
    }

    .fa-twitter {
        background: white;
        color: grey;
    }
    .fa-linkedin{
        background: white;
        color:grey; 
    }