---
layout: single
---

<div style="max-width: 500px; margin: 0 auto">
	<div class="card">
		<div class="card-body text-center py-4 p-sm-5">
			{% include ui/illustration.html image="undraw_work_together_h63l.svg" height="120" class="mb-n2" %}
			<h1 class="mt-5">Welcome to Tabler!</h1>
			<p class="text-muted">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
		</div>

		{% include ui/hr.html text="your data" position="center" class="hr-text-spaceless" %}

		<div class="card-body">
			<div class="mb-3">
				<label class="form-label">Create your Tabler URL</label>
				<div class="form-hint">Choose a URL that describes you or your business in a concise way. Make it short and easy to remember so you can share links with ease.</div>
				{% include ui/form/input-group.html prepend="https://tabler.io/" input-class="pl-1" flat=true %}
			</div>

			<div>
				<label class="form-label">Timezone</label>
				<select class="form-select mb-0">
					{% for timezone in site.data.timezones %}
					<option value="{{ timezone.abbr }}"{% if timezone.abbr == 'CEDT' %} selected{% endif %}>{{ timezone.text }}</option>
					{% endfor %}
				</select>
			</div>
		</div>
	</div>

	<div class="row align-items-center">
		<div class="col-3">
			{% include ui/progress.html value=25 %}
		</div>
		<div class="col">
			<div class="btn-list justify-content-end">
				{% include ui/button.html text="Set up later" color="link" %}
				{% include ui/button.html text="Continue" color="primary" %}
			</div>
		</div>
	</div>
</div>
