JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<link rel="stylesheet" href="https://iris.alkamitech.com/cdn/iris/1.10.0/iris.min.css">
<script src="https://iris.alkamitech.com/cdn/iris/1.10.0/iris.min.js"></script>
<button class="iris-button iris-button--primary">
    <span class="iris-button__text">Primary</span>
</button>
<button class="iris-button iris-button--secondary">
    <span class="iris-button__text">Secondary</span>
</button>
<button class="iris-button iris-button--action">
    <span class="iris-button__text">Action</span>
</button>
<button class="iris-button iris-button--ghost">
    <span class="iris-button__text">Ghost</span>
</button>
<button class="iris-button iris-button--circular" aria-label="Edit account information">
    <span class="iris-button__icon font-icon-pencil"></span>
</button>

<br />

<div class="surface surface-1">surface</div>
<div class="surface surface-2">surface</div>
<div class="surface surface-3">surface</div>
<div class="surface surface-4">surface</div>

SCSS

html {
  font-size: 10px;
}

$colorBrandedGuidance: #0C2340;
$colorBrandedGuidanceOnColor: #869dba;
$colorBrandedGuidanceAccessible: #f1f2f3;
$colorBrandedGuidance50: #f1f2f3;
$colorBrandedGuidance100: #e3e7eb;
$colorBrandedGuidance200: #c6cdd6;
$colorBrandedGuidance300: #a7b6c8;
$colorBrandedGuidance400: #869dba;
$colorBrandedGuidance500: #6d84a1;
$colorBrandedGuidance600: #536a87;
$colorBrandedGuidance700: #3a516e;
$colorBrandedGuidance800: #203754;
$colorBrandedGuidance900: #071e3b;

:root {
    --colorBrandedGuidance: #{$colorBrandedGuidance};
    --colorBrandedGuidanceOnColor: #{$colorBrandedGuidanceOnColor};
    --colorBrandedGuidanceAccessible: #{$colorBrandedGuidanceAccessible};
    --colorBrandedGuidance50: #{$colorBrandedGuidance50};
    --colorBrandedGuidance100: #{$colorBrandedGuidance100};
    --colorBrandedGuidance200: #{$colorBrandedGuidance200};
    --colorBrandedGuidance300: #{$colorBrandedGuidance300};
    --colorBrandedGuidance400: #{$colorBrandedGuidance400};
    --colorBrandedGuidance500: #{$colorBrandedGuidance500};
    --colorBrandedGuidance600: #{$colorBrandedGuidance600};
    --colorBrandedGuidance700: #{$colorBrandedGuidance700};
    --colorBrandedGuidance800: #{$colorBrandedGuidance800};
    --colorBrandedGuidance900: #{$colorBrandedGuidance900};
}

$colorBrandedAffordance: #CB4F00;
$colorBrandedAffordanceOnColor: #f87c2d;
$colorBrandedAffordanceAccessible: #f3f1f0;
$colorBrandedAffordance50: #f3f1f0;
$colorBrandedAffordance100: #ebe5e1;
$colorBrandedAffordance200: #dbc8bb;
$colorBrandedAffordance300: #e4a47b;
$colorBrandedAffordance400: #f87c2d;
$colorBrandedAffordance500: #df6314;
$colorBrandedAffordance600: #c04b00;
$colorBrandedAffordance700: #913900;
$colorBrandedAffordance800: #602500;
$colorBrandedAffordance900: #311300;

:root {
    --colorBrandedAffordance: #{$colorBrandedAffordance};
    --colorBrandedAffordanceOnColor: #{$colorBrandedAffordanceOnColor};
    --colorBrandedAffordanceAccessible:...