JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<h1 class="text-truncate">H1 Headinggggggggggg</h1>

<div class="card mt-3" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title text-truncate">Card title gggggyyyyyyyyyyyyyyy</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="list-group mt-3">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <h5 class="mb-1 text-truncate">List group item headinggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggv</h5>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
</div>