JSFiddle - React, Tailwind, and code Playground

by Sanjeev Pande

HTML

<div class="container">
  <h1>Title goes here</h1>

  <article>Lorem.</article>

  <img src="https://ununsplash.imgix.net/photo-1421284621639-884f4129b61d?dpr=1.80&fit=crop&fm=jpg&h=700&q=75&w=1050"/>

  <article>Lorem.</article>

  <img class="" src="https://ununsplash.imgix.net/photo-1421284621639-884f4129b61d?dpr=1.80&fit=crop&fm=jpg&h=700&q=75&w=1050"/>

  <footer class="footer">
    <p>Here are my footnotes</p>
  </footer>
</div>

CSS

article {
  margin: 3em 0;
}

img {
  width: 100%;
  vertical-align: middle;
  margin: 0;
}

.image-before-footer {
  margin-bottom: 3em;
}
.footer{
    background:#000;
    width:100%;
    min-height:100px;

}

JavaScript

$( "footer.footer" ).prev('img').addClass( "image-before-footer" );