JSFiddle - React, Tailwind, and code Playground

by Czechler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/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</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 class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
                <div class="col">
                    <div class="card card--layout-icon-side">
                        <div class="card__icon bg-primary">
                            <span class="fa fa-power-off" aria-hidden="true"></span>
                        </div>
                        <div class="card__content">
                            <h3 class="card__title">Maximum Power Efficiency</h3>
                            <div class="card__description">
                                <p>USAutomatic has the industry’s most efficient power management software and
                                    electronics.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card card--layout-icon-side">
                        <div class="card__icon bg-primary">
                            <span class="fa...

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:...