tabler/preview/pages/_includes/parts/charts/activity.html

<div class="card">
	<div class="card-body">
		<div class="d-flex">
			<h3 class="card-title">Active users</h3>
			<div class="ms-auto">
				{% include "parts/dropdown/days.html" %}
			</div>
		</div>

		<div class="row">
			<div class="col">
				{% include "ui/chart.html" chart-id="active-users-2" %}
			</div>
			<div class="col{% unless include.hide-breakpoint %}-md{% endunless %}-auto">
				<div class="divide-y divide-y-fill">
					<div class="px-3">
						<div class="text-secondary">
							<span class="status-dot bg-primary"></span> Mobile
						</div>
						<div class="h2">11,425</div>
					</div>
					<div class="px-3">
						<div class="text-secondary">
							<span class="status-dot bg-azure"></span> Desktop
						</div>
						<div class="h2">6,458</div>
					</div>
					<div class="px-3">
						<div class="text-secondary">
							<span class="status-dot bg-green"></span> Tablet
						</div>
						<div class="h2">3,985</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>