JSFiddle - React, Tailwind, and code Playground

HTML

<center>
  <div style="margin : auto; text-align: center">
    <a href="#" style="display: -moz-inline-box; display: inline-block; left; margin-right: 10px;">Menu Item 1</a>
    <a href="#" style="display: -moz-inline-box; display: inline-block; margin-right: 10px;">Menu Item 2</a>
    <a href="#" style="display: -moz-inline-box; display: inline-block; margin-right: 10px;">Menu Item 3</a>
  </div>
</center>


<div style="width: auto; margin: auto;">
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="top left" href="http://topleft">top left</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://toleft/"><img class="aligncenter size-medium wp-image-20" title="top left" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="top right" href="http://topright">top right</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://topright"><img class="aligncenter size-medium wp-image-20" title="top right" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="clear: both;"> </div>

<div style="width: auto; margin: auto;">
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="bottom left" href="http://bottomleft/">bottom left</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://bottom left"><img class="aligncenter size-medium wp-image-20" title="bottom left" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>
    
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="bottom right" href="http://bottomright/">bottom right</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://bottom right"><img class="aligncenter size-medium wp-image-20" title="bottom right" src="" alt="" width="250" height="250" /></a>
</strong></p>

</div>
</div>
</div>