JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <h6 class="card-subtitle mb-2 text-muted">Subtítulo</h6>
    <p class="card-text">Contenido de la tarjeta</p>
    <a href="#" class="card-link">Enlace 1</a>
    <a href="#" class="card-link">Enlace 2</a>
  </div>
</div>

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Tarjeta con borde</h5>
    <p class="card-text">Sontenido de la tarjeta</p>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
  <h5 class="card-title">Tarjeta con alineación a la derecha</h5>
    <p class="card-text">Contenido alineado a la derecha</p>
    <a href="#" class="btn btn-primary">Botón dentro de la tarjeta</a>
  </div>
</div>

CSS

body {
  padding: 30px;
}