JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

<div class="leftBlock">
  <h1 class="left">title0 </h1>
  <img class = "left" src="img_tree.png" alt="pic0" style="width:304px;height:228px;">
  <p class="left"><a>word0</a></p>
</div>

<div class="rightBlock">
  <h1 class="right">title1 </h1>
  <img class = "right" src="img_tree.png"  alt="pic1" style="width:304px;height:228px;">
  <p class="right"><a>word1</a></p>
</div>

CSS

/*
img.right{
float: left;
margin-right: 300px;
}
*/
h1.left p1.left {
text-align: left;
}

h1.right p1.right{
text-align: right;
}

.leftBlock {
  float: left;
}

.rightBlock {
  float: right;
}