JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>
  Test environment for grid layouts
</h2>


Simple grid layouts.
<p>

<small>Yes, they're simple.</small>

</p>

<div class="container">
<div class="iconcol">
 <i class="fa fa-large fa-black-tie"></i>
</div>
<div class="textcol">
asf
</div>

</div>

SCSS

body {
  font-family: 'Source Sans Pro';
  font-size:14px;
  color: #222;
  padding:2rem;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}

.container {
    display: grid;
  grid-template-columns: [first] 1fr [second] 5fr;
  grid-template-rows: auto;
  grid-template-areas:
    "side ."
    ". text";
    border: 1px solid #ccc;
    padding:1rem;
}

.iconcol {
  grid-area: "side";
}

.textcol {
  grid-area: "text";
}