JSFiddle - React, Tailwind, and code Playground
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<br style="display: none">
<style>
#outer {
width: 50%;
margin: auto;
}
#header {
width: 100%;
margin-bottom: 5px;
padding-bottom: 0px;
}
.image {
max-width: 100%;
}
#carimage {
margin: auto 5px;
width: 200px;
}
.block {
border: 2px solid #0985e7;
margin-bottom: 4px;
}
.listing {
margin: 10px;
padding: 0px;
font-family: serif;
}
.paragraph {
padding: 0px;
margin: 10px;
font-family: serif;
}
#promotion {
background-color: #0985e7;
color: white;
}
@media screen and (max-width: 700px) {
#outer {
width: 100%;
}
}
</style>
<div id="outer">
<img class="image" id="header" src="https://i.ebayimg.com/00/s/MzYwWDE2MDA=/z/0f0AAOSwFnxbvA0X/$_45.PNG">
<div class="block" id="part">
<h2 class="listing">Really long ebay title that is really quite long</h2>
<p class="paragraph">
This is a quality OEM part. See pictures for details on condition.
</p>
</div>
<div class="block" id="car">
<h2 class="listing">Donor Vehicle</h2>
<ul>
<li>2002 Volvo V70</li>
<li>200,000 miles</li>
<li>Color Code: </li>
<li>Condition: Light wreck on right side, running and driving with no codes</li>
</ul><img class="image" id="carimage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Volvo_V70_--_12-26-2009.jpg/1200px-Volvo_V70_--_12-26-2009.jpg">
</div>
<div class="block" id="fitment">
<h2 class="listing">Fits</h2>
<p class="paragraph">Volvo S80 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016<br> Volvo S80 2.0l 4 cylinder Turbo 2016 Volvo V70 2008, 2009, 2010 Volvo V70 3.2l 6 cylinder 2010 Volvo XC70 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016 Volvo XC70 3.2l 6
cylinder 2008</p>
</div>
<div class="block" id="promotion">
<h2 class="listing">Quality parts at quality prices!</h2>
<p class="paragraph">
We strive for quality in our listings. Feel free to make us an offer for this part, or contact us with...