.mx, .my, .pt, .pr
.col-6, .col-md-4
.d-flex, .flex-column, 
.justify-content-md-center

.block__element--modifier

<div class="
     block__element--modifier 
     col-6 col-md-3 col-lg-4
     ">
  ...
</div>

<div class="cocr__card col-xs-12 col-sm-6 col-lg-4">      
  <div class="cocr__card__img-wrapper">
    <a href="...">
      <img class="cocr__card__img img-responsive img-fluid" src="..." />
    </a>
    <span class="cocr__card__project-tag cocr__card__project-tag--research">
      Research &amp; Engineering
    </span>
  </div>    
  <div class="cocr__card__content-wrapper col-xs-12">
    <div class="cocr__card__content__title">
      <h2 class="h3">
        <a href="...">
          Involvement with the COVID-19 Disease Map project
        </a>
      </h2>
    </div>
    <div class="cocr__card__content__description">
        The COVID-19 Disease Map project is an international...
    </div>
  </div>
</div>

<div class="w-full sm:w-1/2 md:w-1/3">
  <div class="relative">
    <a href="...">
      <img src="...">
    </a>
    <span class="text-sm bg-red-800 text-white px-2 py-1 absolute bottom-0 mb-3">
      Research &amp; Engineering
    </span>
  </div>
  <div class="w-full text-white p-4">
    <div>
      <h2 class="text-2xl font-bold">
        <a href="...">
          Involvement with the COVID-19 Disease Map project
        </a>
      </h2>
    </div>
    <div class="text-gray-500 text-sm pt-3">
      The COVID-19 Disease Map project is an international...
    </div>
  </div>
</div>

- <h1>Manage Account<h1>
+ <h1 class="text-xl font-semibold">Manage Account<h1>

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.

$btn-padding-y:               $input-btn-padding-y !default;
$btn-padding-x:               $input-btn-padding-x !default;
$btn-font-family:             $input-btn-font-family !default;
$btn-font-size:               $input-btn-font-size !default;
$btn-line-height:             $input-btn-line-height !default;
$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
$btn-font-size-sm:            $input-btn-font-size-sm !default;

$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
$btn-font-size-lg:            $input-btn-font-size-lg !default;

$btn-border-width:            $input-btn-border-width !default;

$btn-font-weight:             $font-weight-normal !default;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
$btn-focus-width:             $input-btn-focus-width !default;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
$btn-disabled-opacity:        .65 !default;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;

$ npx tailwindcss init --full

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
}