JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link href='//fonts.googleapis.com/css?family=Rochester' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>

<div class="place-card">
  <div class="place-card-name">Kelly Porter</div>
  <div class="place-card-sub capitalice">Table seventeen</div>
</div>
<div class="place-card">
  <div class="place-card-name">Kelly Porter</div>
  <div class="place-card-sub capitalice">Table seventeen</div>
</div>
<div class="place-card">
  <div class="place-card-name">Kelly Porter</div>
  <div class="place-card-sub capitalice">Table seventeen</div>
</div>
<div class="place-card">
  <div class="place-card-name">Kelly Porter</div>
  <div class="place-card-sub capitalice">Table seventeen</div>
</div>

CSS

body {
   margin:20px;
}
.place-card{
  /* height:400px; Real print height */
  height:180px;
  width:350px;
  border:1px solid #e4e0e0;
  background-color:#fffef6;
  position: relative;
  float: left;
  margin:5px;
}
.place-card-name{
   font-family: 'Rochester';
   font-size: 45px;
   text-align:center;
   margin-top:60px;
}
.place-card-sub{
  position:absolute;
  font-family:Open Sans;
  font-size: 11px;
  bottom:35px;
  text-align:center;
  width:100%;
}
.capitalice{
  text-transform: uppercase;
}