JSFiddle - React, Tailwind, and code Playground
HTML
<figure>
<img src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg">
<blockquote>“Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”</blockquote>
<figcaption><em>Sarah Dayan</em>Staff Engineer, Algolia</figcaption>
</figure>
CSS
figure {
display: grid;
border-radius: 8px;
border: 1px solid black;
font-family: sans-serif;
width: 75%;
max-height: 240px;
color: rgb(55, 65, 81);
background-color: white;
}
figure img {
grid-column: 1;
grid-row: 1/3;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
max-height: 240px;
margin-right: 32px;
}
figure blockquote {
grid-column: 2;
grid-row: 1;
font-size: 18px;
margin: 32px 32px 0px 0px;
}
figure figcaption {
grid-column: 2;
grid-row: 2;
}
figcaption em {
display: block;
width: 100%;
font-style: normal;
color: rgb(14, 165, 233);
}