Skip to content

Instantly share code, notes, and snippets.

Created July 26, 2021 20:56
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save bzerangue/12c46b219db90c7e3b3ec5acb621038f to your computer and use it in GitHub Desktop.
Alpine JS + fetch()
<div class="h-full bg-gray-200 text-gray-800 p-4 lg:p-8"
.then(response => response.json())
.then(data => users = data)">
<h1 class="mt-0 mb-3 font-light text-3xl" x-text="title"><!-- title text --></h1>
<p class="text-xl text-gray-600 font-light mb-4" x-html="intro"><!-- intro text --></p>
<div class="flex flex-wrap -mx-2 pb-8">
<!-- begin: user card -->
<template x-for="user in users" :key="">
<div class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 h-full font-light">
<div class="flex bg-white rounded-lg shadow-md m-2 border-l-4 border-white hover:shadow-2xl hover:border-pink-500 cursor-pointer relative">
<div class="p-4 pr-6 leading-normal">
<div class="font-medium text-xl truncate" x-text=""></div>
<div class="truncate uppercase text-xs text-gray-500 font-semibold pb-2 tracking-widest" x-text=""></div>
<div class="" x-text=""></div>
<a class="text-blue-600 hover:text-blue-700 mr-4 block" x-bind:href="'mailto:' +" x-text=""></a>
<a class="text-blue-600 hover:text-blue-700 block" x-bind:href="'https://' +" x-text=""></a>
<!-- end: user card -->
function alpineInstance() {
return {
title: 'Alpine.js',
intro: 'Implement a simple <code class="text-md text-pink-600">fetch()</code> request to render a list of items using Alpine.js :)',
users: [],
<script src=""></script>
body, html {
background: #edf2f7;
.text-link {
@apply text-blue-600 hover:text-blue-700;
<link href="" rel="stylesheet" />
<link href="" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment