JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://mattbrailsford.github.io/daton/dist/DATON.min.js"></script>
<div id="data">
  <ul data-dtn-array="people">
    <li data-dtn-object>
      <a href="http://www.google.com" data-dtn-attr="{ 'link' : 'href' }">
        <img src="/img/joe.png" width="400" height="10" data-dtn-attr="{ 'image' : 'src', 'size' : 'width' }" />
        <h4 data-dtn-value="name">Joe blogs</h4>
        <p>Job Role: <span data-dtn-value="role">Director</span></p>
        <p>Email: <span data-dtn-value="email">joe@blogs.com</span></p>
        <div data-dtn-object="address">
          <p data-dtn-value="line1">10 Some St</p>
          <p data-dtn-value="town">Barnsley</p>
          <p data-dtn-value="postcode">S75 1RE</p>
        </div>
      </a>
    </li>
    <li data-dtn-object>
        <a href="http://www.yahoo.com" data-dtn-attr="{ 'link' : 'href' }">
        <img src="/img/jane.png" width="400" height="10" data-dtn-attr="{ 'image' : 'src', 'size' : 'width' }"  />
        <h4 data-dtn-value="name">Jane blogs</h4>
        <p>Job Role: <span data-dtn-value="role">Director</span></p>
        <p>Email: <span data-dtn-value="email">joe@blogs.com</span></p>
      </a>
    </li>
  </ul>
</div>

JavaScript

var div = document.getElementById('data');
var result = DATON.parse(div);
console.log(result);