JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="card">
  <div class="card__inner">
    <div class="card__icon">
      <i class="fas fa-users"></i>
    </div>
    <div class="card__title">Super Team</div>
  </div>
</div>

CSS

body {
  padding: 5%;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600;
  height: 400px;
  margin: auto;

  background: url("http://lorempixel.com/400/200") no-repeat;
  background-size: cover;
  box-shadow: 20px 20px 0 0 rgba(128, 128, 0, 0.5);
}

.card__inner {
  text-align: center;
  
  color: #fff;
}

.card__icon {
  font-size: 32px;
}

.card__title {
  font-size: 24px;
  
  text-transform: uppercase; 
}