JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>
<div class="container pt-5 pb-5">
<div class="quote-container d-flex flex-column justify-content-center">
<p class="bold-weight extra-large-heading italic text-center">
<i class="fas fa-quote-left quotes mr-2" aria-hidden="true"></i>
Facts are meaningless. You could use facts to prove anything that's even remotely true.
<i class="fas fa-quote-right quotes ml-2" aria-hidden="true"></i>
</p>
<p class="text-muted text-center">– Homer Simpson</p>
</div>
</div>
CSS
.quote-container{
min-height:600px;
background:salmon;
}
.quotes {
color:
#FFA300;
}
/*Generic Styles*/
.extra-large-heading {
font-size: 2rem;
}
.italic{
font-style:italic;
}
.bold-weight {
font-weight: 700;
}