JSFiddle - React, Tailwind, and code Playground

HTML

<div class="recent-posts-wrapper">
            <h2>Recent Posts</h2>
    <!-- *********  PROBLEM AREA: *********  -->
            <?php 
            $args = array( 'numberposts' => 6, 'post_status'=>"publish",'post_type'=>"post",'orderby'=>"post_date");

            $postslist = get_posts( $args );
            echo '<div class="recent-posts flexbox">';
             foreach ($postslist as $post) :  setup_postdata($post);
                 echo "<div class=\"flex-section-3 rpost-thumb\" style=\"background-image: url(";
                 the_post_thumbnail_url();
                 echo ")\">"; 
                 ?>
            <h4 class="rpost-category">
             <?php escargatoire_entry_category(); ?>
            </h4>
    <!-- *********  END OF PROBLEM AREA *********  -->
            <div class="rpost-meta">
              <div class="rpost-meta-wrapper">
               <div class="rpost-title">
                  <a href="<?php the_permalink(); ?>" title="<?php the_title();?>">
                    <?php the_title(); ?>
                  </a>
                </div>
                <div class="rpost-author">by <span style="text-transform:capitalize;"><?php the_author(); ?></span><br />
                </div>
                <div class="rpost-comments">
                    <a href="<?php the_permalink(); ?>#comments" title="<?php the_title();?>">
                      <?php comments_number( 'Leave a Comment', '1 Comment', '% Comments' ); ?>
                    </a>
                </div>
              </div> <!-- rpost-meta-wrapper -->
            </div> <!-- rpost-meta -->
            </div> <!-- flex-section-3 rpost-thumb -->
            <?php endforeach; ?>
             </div> <!-- recent-posts flexbox -->
        </div> <!-- recent-posts-wrapper -->

CSS

.flexbox {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .recent-posts-wrapper {
      text-align: center;
    }

    .recent-posts-wrapper .flex-section-3 {
      display: inline-flex;
      position: relative;
      width: 312px;
      height: 175.5px;
      max-width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 2px;
      overflow: hidden;
      background-position: 0 0;
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      background-size: cover;
      margin: 20px auto 0;
    }

    .recent-posts-wrapper h4.rpost-category {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #c900a0;
      mix-blend-mode: multiply;
      font-size: 30pt;
    }

    .rpost-meta {
      position: relative;
      width: 94.375%;
      height: 90%;
      background-color: #000000;
      margin: auto;
      padding: 3% 1.69%;
      color: #FCFCFC;
      font-size: 10pt;
      opacity: 0;
      border-radius: 2px;
      transition: opacity .15s ease-in-out;
      -moz-transition: opacity .15s ease-in-out;
      -webkit-transition: opacity .15s ease-in-out;
    }

    .rpost-meta .rpost-title {
      font-family: "Proxima Nova Bold", Helvetica, sans-serif;
      font-size: 14pt;
      text-transform: uppercase;
      margin-bottom: 4px;
    }

    .rpost-meta .rpost-title a {
      color: #D8EB00;
    }

    .rpost-meta .rpost-title a:hover {
      color: #2FF6F6;
    }

    .rpost-meta div.rpost-author {
      margin-bottom: 20px;
    }

    .rpost-meta .rpost-comments {
      font-size: 12pt;
    }

    .rpost-meta .rpost-comments a {
      color: #FC0262;
    }

    .rpost-meta .rpost-comments a:hover {
      color: #2FF6F6;
    }

    .rpost-meta-wrapper {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 96.62%;
    }

    .rpost-thumb:hover > .rpost-meta {
      opacity: 0.82;
    }

JavaScript

//KMG - my little function to randomize and apply the gradient map from https://github.com/awgreenblatt/gradientmaps:

    var myGrads = [
    "#C900A0, #FF9E01",
    "#FC0262, #D8EB00",
    "#2F24DB, #2FF6F6"
    ]

      var randomGradient = function() {
        console.log("Hello, randomGradient function!")
        var gradientMap = "#C900A0, #D8EB00";
          var target = document.getElementsByClassName("random-grad");
          for (var i = 0; i < target.length; i++) {
              gradientMap = saltyGrads[Math.floor(Math.random() * myGrads.length)];
              var current = target[i];
             GradientMaps.applyGradientMap(current, gradientMap);
        }
      }

      randomGradient();


    // THE CODE SUPPLIED BY THE API:
    window.GradientMaps = function(scope) {
        function GradientMaps() {
            this.init();
        }
        
        GradientMaps.prototype = {
            init: function() {
            },

            calcStopsArray: function(stopsDecl) {    
                /*
                 * Each stop consists of a color and an optional percentage or length
                 * stops: <color-stop> [, <color-stop>]
                 * <color-stop>: color [ <percentage> | <length> ]?
                 *
                 * If the first color-stop does not have a length or percentage, it defaults to 0%
                 * If the last color-stop does not have a length or percentage, it defaults to 100%
                 * If a color-stop, other than the first or last, does not have a length or percentage, it is assigned the position half way between the previous and the next stop.
                 * If a color-stop, other than the first or last, has a specified position less than the previous stop, its position is changed to be equal to the largest specified position of any prior color-stop.
                 */
            
                var matches =...