JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container"> 
		<div class="randqg">
			<div class="title">Random Quote Generator</div>
			<div class="subcontainer">
				<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i>
				<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a>
				</div>
			<blockquote id="text">Original Text</blockquote>
			<div class="subcontainer">
				<span id="author">author</span>
				<i class="fa fa-quote-left" aria-hidden="true"></i>	
				</div>
		</div>
</div>

</body>

<script src="https://use.fontawesome.com/02b956c77d.js"></script>

CSS

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-color: blue;
}

.randqg {
  display: flex;
  align-items: center;
  min-height: 24em;
  justify-content: center;
  flex-direction: column;
  width: 50vh;
  height: 50%;
  border: 5px solid red;
}

.title {

}

.subcontainer{
	width: 80%;
	height: 80%;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	margin: auto;
	display: block;
}