JSFiddle - React, Tailwind, and code Playground

by corin

HTML

<script src="https://raw.github.com/pure/pure/master/libs/pure_min.js"></script>
<div class="section">
  <div class="sub-section">
    <div class="row">
      <div class="heading"> Records</div>
      <div class="clear"></div>
    </div>
    <div class="row record">
      <div class="label"></div>&nbsp;
      <div class="data">
        <div class="time">
          <div class="value"></div>&nbsp;
        </div>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div class="clear"></div>
</div>

JavaScript

records = {
    origin: "example.com."
  , types: [
        {   name: "NS"
          , names: [
                {   data: [
                        {   date: 1318473888
                          , values: ["ns1", "ns2"]
                        }
                    ]
                }
            ]
        }
      , {   name: "MX"
          , names: [
                {   priority: 10
                  , data: [
                        {   date: 1318473888
                          , values: [ "mx1" ]
                        }
                    ]
                }
              , {   priority: 20
                  , data: [
                        {   date: 1324256129
                          , values: [ "mx2" ]
                        }
                    ]
                }
            ]
        }
      , {   name: "A"
          , names: [
                {   name: "@"
                  , data: [
                        {   date: 1318473888
                          , values: [ "192.0.2.1" ]
                        }
                    ]
                }
              , {   name: "office"
                  , data: [
                        {   date: 1318473888
                          , values: [ "192.0.2.2" ]
                        }
                      , {   date: 1324256129
                          , values: [ "192.0.2.3" ]
                        }
                    ]
                   }
            ]
        }
      , {   name: "CNAME"
          , names: [
                {   name: "www"
                  , data: [
                        {   date: 1318473888
                          , values: [ "example.com." ]
                        }
                    ]
                }
            ]
        }
    ]
};

directive = {
    '.sub-section': {
        'type<-types': {
            '+.heading': 'type.name'
          , '.row.record': {
                'name<-type.names': {
                    '.label': 'name.name'
                  , '.data':...