JSFiddle - React, Tailwind, and code Playground

by Czechler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Card Component with JSON Feed</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&family=Roboto:wght@300&display=swap"
        rel="stylesheet">
</head>

<body>
    <div class="wrap">
        <div class="container">
            <div id="cards" class="row row-cols-1 row-cols-md-2 row-cols-lg-3"></div>
        </div>
    </div>
</body>

</html>

SCSS

// Variables
$primary: #D71920;
$white: #ffffff;
$dark: #1A1E2E;
$text: #474747;
$font-heading:'Roboto Slab', serif;
$font-body: 'Roboto', sans-serif;

// Global
html, body {
  font-size: 16px;
}
.wrap {
  padding: 2rem;
}

// Card Component
.card {
   display: flex;
   border: none;
   
   // Mobile/Small
   margin-bottom: 2rem;
   
   // Tablet/Medium
   @media (min-width: 768px) and (max-width: 991px) {
     margin-bottom: 3rem;
   }
   
   // Desktop/Large
   @media (min-width: 992px) {
      margin-bottom: 3.625rem;
   }
   
   
   &--layout-icon-side {
     flex-direction: row;
     .card__icon {
       margin-right: 1rem;
     }
   }
   
   &--layout-icon-top {
     flex-direction: column;
     .card__icon {
       margin-bottom: 1rem;
     }
   }
   
   &__icon {
       display: flex;
       color: $white;
       align-items: center;
       justify-content: center; 
       height: 24px;
       min-width: 24px;
       max-width: 24px;
       border-radius: 4px;
       font-size: .75rem;
       
       // Desktop/Large
       @media (min-width: 992px) {
         height: 32px;
         min-width: 32px;
         max-width: 32px;
         font-size: 1rem;
       }
   }
   

   
   &__title {
     font-family: $font-heading;
     font-weight: 400;
     color: $dark;
     
     // Mobile/Small
     font-size: 1.015625rem;
     line-height: 1.339375rem;
     margin-bottom: .5rem;
     
     // Tablet/Medium
     @media (min-width: 768px) and (max-width: 991px) {
       font-size: 1.128125rem;
       line-height: 1.35625rem;
       margin-bottom: .75rem;
     }
     
     // Desktop/Large
     @media (min-width: 992px) {
        font-size: 1.333125rem;
        line-height: 1.6rem;
        margin-bottom: .75rem;
     }
   }
   
   &__description {
     font-family: $font-body;
     font-weight: 300;
     color: $text;
     
     // Mobile/Small/Tablet/Medium
     font-size: .875rem;
     line-height: 1.3125rem;
    
     // Desktop/Large
     @media (min-width:...

JavaScript

let cardTemplate = "";
function createCardTemplate(item, index) {
  let { title, description, iconClass, iconColor, layout } = item;

  cardTemplate += `
    <div class="col">
        <div class="card card--layout-${layout}">
            <div class="card__icon bg-${iconColor}">
                <span class="${iconClass}" aria-hidden="true"></span>
            </div>
            <div class="card__content">
                <h3 class="card__title">${title}</h3>
                <div class="card__description">${description}</div>
            </div>
        </div>
    </div>
`;
}
// End createCardTemplate

// Card Data/JSON
let cards = [
  {
    title: "Maximum Power Efficiency",
    description: "<p>USAutomatic has the industry’s most efficient power management software and electronics.</p>",
    iconClass: "fa fa-power-off",
    iconColor: "primary",
    layout: "icon-side",
  },
  {
    title: "Multi-Cycle Battery Backup",
    description: "<p>Battery powered for a true backup during power outages — full system operation, not just one cycle.</p>",
    iconClass: "fa fa-battery-full",
    iconColor: "primary",
    layout: "icon-side",
  },
  {
    title: "Solar Accessory Compatible with a Long Title That Wraps to 2 Lines",
    description: "<p>Designed to operate with USAutomatic solar friendly accessories without additional solar panels.</p>",
    iconClass: "fa fa-sun",
    iconColor: "primary",
    layout: "icon-side",
  },
  {
    title: "Made in the USA",
    description: "<p>USAutomatic gate openers are made at our facility in Lewisville, TX using American-made components.</p>",
    iconClass: "fa fa-usa",
    iconColor: "primary",
    layout: "icon-side",
  },
  {
    title: "Remote Operation with App",
    description: "<p>Can be operated remotely with the Nexx Gate WiFi/bluetooth receiver and free mobile app.</p>",
    iconClass: "fa-solid fa-mobile-screen",
    iconColor: "primary",
    layout: "icon-side",
  },
  {
    title: "UL Certified",
   ...