JSFiddle - React, Tailwind, and code Playground
HTML
<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper"><img src="http://placekitten.com/250/250" alt=""></div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span></div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam
ut venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel...
CSS
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
...