JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<div>
    <p>This is the first paragraph</p>
    <p class="parent">
        <img src="http://placekitten.com/600/280" />
    </p>
    <p>Paragraph 3</p>
</div>

CSS

p {
    background: #eee;
    padding: 1em;
    margin: 0 auto;
    display: block;
}
.parent {
    position: relative;
}
img {
    left: 0;
    right: 0;
    max-width: 100%;
}

JavaScript

/*

How do you make the image centered without overwriting the paragraph below it?

position: absolute; or float: left; will both cause problems.

*/