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%;
}
#guarantee {
float: right;
width: 100px;
right: 0;
margin-top: -100px;
}
.carimage {
display: block;
margin: 5px auto;
width: 200px;
}
.block {
border: 2px solid #0985e7;
margin-bottom: 4px;
}
.buy-button {
width: 100%;
height: 75px;
font-size: 24px;
font-family: serif;
font-weight: bold;
color: white;
background-color: #0985e7;
display: none;
}
.buy-button:hover {
width: 100%;
height: 75px;
font-size: 24px;
font-family: serif;
font-weight: bold;
color: white;
background-color: #0985e7;
cursor: pointer;
}
.listing {
margin: 10px;
padding: 0px;
font-family: serif;
}
.paragraph {
padding: 0px;
margin: 10px;
font-family: serif;
}
#promotion {
background-color: #0985e7;
color: white;
}
#farts {
display: block;
text-align: center;
font-family: monospace;
}
@media screen and (max-width: 850px) {
#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><a class="buy-link" href="#" target="_blank"> <button class="block buy-button"> Buy Now! </button> </a>
<div class="block" id="car">
<h2 class="listing">Donor Vehicle</h2>
<ul>
<li>2000 Volvo S80 R6 2.9L B6294S </li>
<li>184,000 miles</li>
<li>Color Code: 443-46</li>
<li>Interior code: 845A</li>
...