JSFiddle - React, Tailwind, and code Playground

by HattrickNZ

HTML

<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css">
<div class="container">

  <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="row">
    <div class="col-md-6">
      <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="col-md-6">
      <h1 class="right">title1 </h1>
      <img class="right" src="img_tree.png" alt="pic1" style="width:304px;height:228px;">
      <p class="right"><a>word0</a></p>
    </div>
  </div>
</div>

CSS

/*
img.right{
float: left;
margin-right: 300px;
}
*/

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

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