JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<blockquote><p>Curabitur vulputate diam eget sapien convallis, et gravida sapien adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt magna nibh, sit amet tincidunt nisl rutrum at. Ut aliquam ipsum in lacus vestibulum ultricies. Donec vel erat metus. Quisque auctor mattis elementum. Fusce lacus erat, egestas non tellus eget, rhoncus blandit justo. <strong>Mr Testimonial, Acme Ltd.</strong></p></blockquote>

CSS

blockquote {
font-style: italic;
background: #f6f6f6;
padding: 20px 40px;
line-height: 1.45;
position: relative;
color: #383838;
display: block;
}
blockquote p:before, blockquote p:after {
font: bold 45px/1px Times, serif;
color: #B9132B;
position: absolute;
}
blockquote p:before {
content: "\201C";
margin: 15px 0 0 -25px;
}
blockquote p:after {
content: "\201D";
margin: 23px 10px 23px 10px;
}
blockquote strong {
color: #999999;
font-size: 14px;
display: inline-block;
margin-top: 5px;
float:right;
}
blockquote strong:before {
content: "\2014 \2009";
}