JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<div id="app"> 

    <div class="d-flex flex-wrap p-2">
    
        <div v-for="(user, index) in users" class="m-2" v-bind:key="index">

            <!--pre>{{ user }}</pre-->

            <a :href="'mailto:' + user.email.toLowerCase()" :title="user.name">

                <svg class="bd-placeholder-img rounded-circle" style="text-anchor:middle;font-size:2.5rem" width="100" height="100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect width="100%" height="100%" fill="#868e96"></rect>
                    <text x="50%" y="50%" fill="#dee2e6" dy=".35em">
                        {{ user.name.split(' ')[0].charAt(0) }}{{ user.name.split(' ')[1].charAt(0) }}
                    </text>
                </svg>

            </a>

        </div>
        
    </div>
    
</div>

Vue

new Vue({
    el: '#app',
    data: {
    	users: []
    },
    created() {
    	this.userIndex();
    },
    methods: {
    	userIndex() {
            
            var _this = this;

            fetch('https://jsonplaceholder.typicode.com/users').then(function(response){
            
                return response.json();

            }).then(function(json){

                _this.users = json;

            });
            
        }
    }
})