JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<html lang="en">

<head>
<title>test</title>
</head>

<body>

  <div id="app">

    <div v-for="blog in blogs" :key="blog.id" >
      <div class="container">
        <div class="row">
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-preview">
              <h2 class="post-title">[[ blog.title ]]</h2>
              <p>[[ blog.body ]]</p>
              <p class="post-meta">Posted on [[ blog.postTime ]] </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <hr>


  </div>

<script type="module" src="/static/node_modules/moment/dist/moment.js"></script>
<script src="/static/node_modules/requirejs/require.js"></script>
<script>
    requirejs.config({
        packages: [{
        name: 'moment',
        // This location is relative to baseUrl. Choose bower_components
        // or node_modules, depending on how moment was installed.
        location: '/static/node_modules/moment',
        main: 'moment'
        }]
    });
</script>
 
<script type="module">import moment from '/static/node_modules/moment/dist/moment.js';
 
    var app = new Vue({
        delimiters: ['[[', ']]'],
        el: '#app',
        data: {
            blogs : [],
        },
        mounted(){
 
            console.log(moment().format());
            axios
                .get('/api/blogs/')
                .then(response => { (this.blogs = response.data.results) });
        },
    });
</script>

</body>