JSFiddle - React, Tailwind, and code Playground
HTML
<blockquote class="testimonial">
<p>You don’t need to see his identification. These aren’t the droids you’re looking for. He can go about his business. Move along.
You don’t need to see his identification. These aren’t the droids you’re looking for. He can go about his business. Move along.</p>
</blockquote>
<p class="testimonial-author"></p>
CSS
.testimonial {
position: relative;
margin: 0;
background-color: #fafafa;
border: 1px solid #e6e6e6;
width: 70%;
margin: 0 auto;
border-radius: 2px;
padding: 20px 20px 20px 70px;
}
.testimonial p {
font-family: 'Open Sans', sans-serif;
font-size: 0.9em;
text-align: justify;
font-weight: 400;
color: #666666;
}
.testimonial:before {
content: '"';
font-family: 'Open Sans', sans-serif;
font-size: 80px;
line-height: 1;
color: #999;
font-style: italic;
position: absolute;
left: 15px;
top: 2px;
}
.testimonial:after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fafafa;
position: absolute;
bottom: -10px;
left: 30px;
}