JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div id="body"></div>

<template id="item">
  <div class="b-card">
    <img src="http://cdn1.tu-tu.ru/images2/bemp/blocks/tours/country/card_big/th.jpg" alt="">
    <div class="alt">
      <div class="name">Text</div>
      <div class="price">Price</div>
    </div>
  </div>
</template>

CSS

:root {
  font: 0.8rem Verdana;
}

#body {
  width: 100%;
  height: 100%;
  text-align: center;
}

.b-card {
  background: #fff;
  margin: 10px auto;
  width: 300px;
  height: 240px;
  padding: 10px;
  border-radius: 5px;
}

.b-card img {
  width: 300px;
  height: 200px;  
}

.alt div {
  margin: 5px 0;
}

.alt div:nth-child(1) {
  float: left;
}

.alt div:nth-child(2) {
  float: right;
}

JavaScript

var $ = document.querySelector.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
Element.prototype.$  = function (selector){ return $(selector, this) }

let dataUrl = 'https://cdn.rawgit.com/tutu-ru/frontend-javascript-test/master/remote-data-v03.json';

let $body = $('#body');

fetch(dataUrl)
  .then(response => response.json())
	.then(data => {
			let item = data[0];
      let tpl = $('#item').cloneNode(true);

			//tpl.$('div:nth-child(1)').innerHTML = item.country.name;
			//tpl.$('div:nth-child(2)').innerHTML = item.priceFrom;
      
			$body.innerHTML = tpl.innerHTML;
  })
  .catch(console.error);