JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
  <div class="flex-item1"><img src="{{media url=" wysiwyg/wedding-2844538_1920.jpg "}}" alt="Events">EVENTS</div>
  <div class="flex-item2"><img src="{{media url=" wysiwyg/wedding-2844538_1920.jpg "}}" alt="Events">EVENTS</div>
  <div class="flex-item3"><img src="{{media url=" wysiwyg/wedding-2844538_1920.jpg "}}" alt="Events">EVENTS</div>
  <div class="flex-item4"><img src="{{media url=" wysiwyg/wedding-2844538_1920.jpg "}}" alt="Events">EVENTS</div>
</div>

CSS

.flex-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}