JSFiddle - React, Tailwind, and code Playground

by insin

HTML

<script src="https://github.com/insin/DOMBuilder/raw/master/DOMBuilder.js"></script>

CSS

.ui-tabs-nav { margin-bottom: 1em; }
.ui-tabs-panel { border: 1px solid #000; margin-bottom: 1em; }

JavaScript

var items = [
  {
    "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href=\"#\" >read more</a>",
    "MediaUrl": "/images/image1.jpg",
    "AlternativeText": "15+ Excellent High Speed Photographs",
    "Height": 1050,
    "ThumbnailUrl": "/images/image1-thb.jpg",
    "Width": 1680
  },
  {
    "Description": "Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href=\"#\" >read more</a>",
    "MediaUrl": "/images/image2.jpg",
    "AlternativeText": "20 Beautiful Long Exposure Photographs",
    "Height": 1050,
    "ThumbnailUrl": "/images/image2-thb.jpg",
    "Width": 1680
  },
  {
    "Description": "Liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href=\"#\" >read more</a>",
    "MediaUrl": "/images/image3.jpg",
    "AlternativeText": "35 Amazing Logo Designs",
    "Height": 1050,
    "ThumbnailUrl": "/images/image3-thb.jpg",
    "Width": 1680
  },
  {
    "Description": "Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href=\"#\" >read more</a>",
    "MediaUrl": "/images/image4.jpg",
    "AlternativeText": "Create a Vintage Photograph in Photoshop",
    "Height": 1050,
    "ThumbnailUrl": "/images/image4-thb.jpg",
    "Width": 1680
  }
];

DOMBuilder.apply(window);

document.body.appendChild(
  DIV({id: "featured"},
    UL({"class": "ui-tabs-nav"},
      LI.map({"class": "ui-tabs-nav-item"}, items, function(item, attrs, idx) {
        attrs["id"] = "nav-fragment-" + (idx + 1);
        if (idx === 0) {
          attrs["class"] += " ui-tabs-selected";
        }
        return A({href: "#fragment-" + (idx + 1)},
          IMG({src: item.ThumbnailUrl, alt: ""}),
          SPAN(item.AlternativeText)
        );
      })
    ),
    DOMBuilder.fragment.map(items, function(item, idx) {
 ...