<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.3.5/dist/alpine.min.js" defer></script>
<button class="alert alert-danger" @click="getUsers">Alert</button>
<div x-model="users()" x-init="getUsers" class="col-md-12 bg-info p-5 m-0 row">
dd <div x-for="user in list" class="col-md-3 card">
<template class="card-body">
<div class="row align-items-center">
<div class="col-auto">
<a href="#" class="avatar avatar-xl rounded-circle">
<img alt="Image placeholder" src="../../assets/img/theme/team-2.jpg">
</a>
</div>
<div class="col ml--2">
<h4 class="mb-0">
<a href="#!" x-text="user.name"></a>
</h4>
<p class="text-sm text-muted mb-0" x-text="user.email">Working remoteley</p>
</div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-primary">Add</button>
</div>
</div>
</template>
</div>
</div>
