JSFiddle - React, Tailwind, and code Playground

HTML

<div id="section-support-links">
            <div class="wide-content">
                <div class="link-quarters equal-height">
                    <a href="#">
                        
                    </a>
                </div>
                <div class="link-quarters equal-height">
                    <a href="#">
                        
                    </a>
                </div>
                <div class="link-quarters equal-height">
                    <a href="#">
                        
                    </a>
                </div>
                <div class="link-quarters equal-height">
                    <a href="#">
                        
                    </a>
                </div>
                <div class="clear"></div>
            </div>
        </div>

SCSS

// Sass Variables
$accent-red: #e95f5c;
$accent-blue: #86c4e6;

$background-light-grey: #F1F2F3;
$background-med-grey: #EAEAEA;
$background-dark-grey: #58595B;
$background-dark-green: #247390;

$typography-dark: #58595B;

$black: #000000;
$white: #ffffff;
$off-white: #F5F5F5;

$font-museo-slab: "museo-slab",serif;
$font-museo-sans: "museo-sans",sans-serif;

// Slider Icon Colours
$icon-shadow: #e4e6e8;
$icon-bg: #ffffff;
$icon-outline: #e95f5c;
$icon-shadow-hov: #dc5a58;
$icon-bg-hov: #e95f5c;
$icon-outline-hov: #ffffff;
$icon-number: $background-dark-green;

$trans-fast: all 0.2s;



.svg-icon-position {
    position: absolute;
    top: 0;
    left: 0;
}










// General styling
.site-container {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

#section {
&-support-links {
        @extend .site-container;
        
        h2 {
            font-size: 27px;
            position: absolute;
            bottom: 15px;
            z-index: 99;
            padding: 0 15px;
            margin: 0;
            
            @media all and (max-width: 1300px) {
                font-size: 22px;
            }
            
            @media all and (max-width: 1000px) {
                font-size: 18px;
            }
            
            @media all and (max-width: 750px) {
                font-size: 16px;
            }
        }
        
        .link-quarters {            
            width: 25%;
            float: left;
            background-color: $background-light-grey;
            position: relative;
            border: 1px solid #ffffff;
            overflow: hidden;
            transition: $trans-fast;
            
            @media all and (max-width: 750px) {
                width: 50%;
            }
            
            &:hover {
                background-color: $icon-bg-hov;
                
                .icon-shadow {
                    fill: $icon-shadow-hov;
                }

                .icon-bg {
                    fill:...

JavaScript

// Height = Width
            $(document).ready(function(){                
                $(".equal-height").each(function(){
                    var slideSize = $(this).outerWidth();
                    
                    console.log(slideSize);
                    
                    $(this).css({"height" :slideSize+"px"});
                });                
            });