JSFiddle - React, Tailwind, and code Playground
HTML
<div id="msdoc">
<div id="page" style="width: 612pt; height: 792pt;">
<button id="toggler" type="button" inline-display="on" onclick="changeStyleOfImgContainer()" >Make the first div block</button>
<div id="data"></div>
<div id="contentsContainer" contenteditable="true" style="padding-left: 72pt; padding-right: 72pt;border-width: 2px;border-style: solid;">
<div id="contents">
<div id="section">
<div>
<div>
<div contenteditable="false" id="imgContainer" style="display:block;">
<span contenteditable="false" style="display: inline-block; width: 70.141mm; height: 39.471mm; background-image: url("https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); background-size: 70.141mm 39.471mm; background-position: 0mm 0mm; background-repeat: no-repeat;"></span>
</div>
</div>
</div>
<div>
<p>
<span>
Some text
</span>
</p>
</div>
<div>
<p>
<span>
Some text
</span>
</p>
</div>
<div>
<div contenteditable="false">
<span contenteditable="false" style="display: inline-block; width: 70.141mm; height: 39.471mm; background-image: url("https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); background-size: 70.141mm 39.471mm; background-position: 0mm 0mm; background-repeat: no-repeat;"></span>
</div>
</div>
<div>
<p>
<span>
Some text
</span>
</p>
</div>
<div>
<p>
<span>
Some text
</span>
</p>
</div>
<div>
<p>
<span>
Some...