JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<section>
  <div class="container">
    <div class="hero-text">
      <div class="text-fixed">I'm a fixed text</div>
      <div class="text"></div>
    </div>
    <div class="images">
      <!-- no images -->
    </div>
  </div>
</section>

CSS

BODY {
  padding: 1rem;
  margin: 0;
}

SECTION .container {
  border: 1px black solid;
  padding: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: initial;
  min-height: 100px;
  justify-content: center;
  margin-bottom: 1rem;
}

SECTION .container .hero-text {
  width: 50%;
  background: cyan;
}

SECTION .container .images {
  width: 50%;
  background: red;
}

SECTION .container .images IMG {
  display: block;
  width: 100%;
}

JavaScript 1.7

// section
const section = $('SECTION');

// contents
let contents = [
	{
		text: "i'm the first sentence",
    images: [
      "https://i.imgur.com/q5Y5RCH.png",
      "https://i.imgur.com/8HjXPXD.png",
      "https://i.imgur.com/vUDcfcy.png"
    ]
  },
  {
		text: "i'm the second sentence",
    images: [
      "https://i.imgur.com/EYTCssm.png",
      "https://i.imgur.com/3sAFPmL.png",
    ]
  },
  {
		text: "i'm the third sentence",
    images: []
  },
  {
		text: "i'm the fourth sentence",
    images: [
      "https://i.imgur.com/6JplNl6.png",
      "https://i.imgur.com/6X5GKWJ.png",
      "https://i.imgur.com/SefTwI1.png",
      "https://i.imgur.com/qBmDrTU.png"
    ]
  }
];

// for each contents as index content
$.each(contents, function(index,content) {

   // get our content data
   let text = content.text;
   let images = content.images;

});