JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<header class="clearfix" style="background:#b49e66; padding:20px; width:98%; float:left;">
			
				<h2 style="text-shadow: 4px 4px 0px #41838e; font-size: 62px; font-family: arial; color: #fff; font-weight: 400; line-height:normal; float:left; width:100%;">CSS Zilla
                    <span style="font-weight: 700; text-transform: uppercase; letter-spacing: 10px; font-size: 18px;color: #F26328;text-shadow: none; font-family: arial; float:left; width:100%;">CSS innovation simplified</span></h2>
			
				
</header>

<div style="width:500px; height:auto; padding:100px 10px; background-color:#ccc; margin:0 auto; line-height:20px; text-align:center; float:left; margin-top:20px;">
<q><span class="quote">
...this is the quote 
...this is the quote 
...this is the quote ankit</span></q>
</div>

CSS

<style>

q {
 line-height:20px; height:auto;
}
q:before {
color: #fa4173;
font-family: Times New Roman, Times, serif;
content: '\201C';
font-size: 60px;
padding-right: 5px;
}
q:after {
color: #fa4173;
font-family: Times New Roman, Times, serif;
content: '\201D';
font-size: 60px;
padding-left: 5px;
margin-top: 5px;
}
.quote {
position: relative;
top: -28px;
height: auto;
font-size: 1.7em;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

</style>