JSFiddle - React, Tailwind, and code Playground

by janzikmund

HTML

<html>
<head><script src="https://unpkg.com/alpinejs" defer></script></head>
<body>
	<div x-data="{ user: { number: 5, name: 'John Doe', country: 'US' }}">
		<template x-if="user">
			<div>
				<div x-data="{ count: 0 }" x-modelable="count" x-model="user.number">
					local count: <span x-text="count"></span>
					<button @click="count++">Increment</button>
				</div>
				<hr>

				Number: <span x-text="user.number"></span>
				Name: <span x-text="user.name"></span>
				Country: <span x-text="user.country"></span>
			</div>
		</template>

		<button @click="user=null">remove user</button>
		<button @click="user={ number: 10, name: 'Jane Doe', country: 'UK' }">revert user</button>
	</div>
</body>