Bur theme

A modern and elegant Tailwind theme

Bur theme is built with Tailwind CSS version 4, embodying all the modern aesthetics and design principles that Tailwind represents.

Why Tailwind?: Tailwind CSS is a cutting-edge utility-first framework that doesn't interfere with your creative process or force you to follow predefined patterns when building visually appealing websites.
Built with SvelteKit: Our theme is built with SvelteKit but can easily be implemented with pure HTML and JavaScript.
Utilities included: All the essential utilities are included, and we plan to extend them based on customer requests. Dark and light mode are meticulously designed across all utilities.

Buy Bur theme now Preview

Re-usable components

Our themes are built with re-usable components

We simplify access to the most common UI components, allowing you to get started effortlessly with a quick copy-and-paste process.

CSS table

HTML

Lamin Yamal

momail@my-mail.com

Co-Founder / CEO

Online
Erick Anthony

yo@mo-mail.com

Video & Graphics / Editor

Last seen 3h ago
Cinthia McDonal

my-mail@mail.com

Designer

Last seen 3h ago
Diana Ferguson

e-mail@mail.com

Director of Product

Last seen 3h ago

    		
			<div	class="clear-both mx-auto rounded-xl border-2 border-gray-200 px-4 py-8 sm:px-20 dark:border-gray-800">
				<ul role="list" class="divide-y divide-gray-100 dark:divide-gray-700">
					<li class="flex justify-between gap-x-6 py-5">
						<div class="flex min-w-0 gap-x-4">
							<img
								class="size-12 flex-none rounded-full bg-gray-50"
								src="https://mylastore.sfo3.cdn.digitaloceanspaces.com/media/ceo-md.webp"
								width="400"
								height="400"
								alt="Oscar Profile"
							/>
							<div class="min-w-0 flex-auto">
								<p class="text-sm/6 font-semibold text-gray-900 dark:text-gray-300">Lamin Yamal</p>
								<p class="mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400">
									momail@my-mail.com
								</p>
							</div>
						</div>
						<div class="shrink-0 sm:flex sm:flex-col sm:items-end">
							<p class="text-sm/6 text-gray-900 dark:text-gray-300">Co-Founder / CEO</p>
							<p class="text-xs/5 text-green-600 dark:text-green-700 float-end">Online</p>
						</div>
					</li>
					<li class="flex justify-between gap-x-6 py-5">
						<div class="flex min-w-0 gap-x-4">
							<img
								class="size-12 flex-none rounded-full bg-gray-50"
								src="https://mylastore.sfo3.cdn.digitaloceanspaces.com/media/erick-md.webp"
								width="400"
								height="400"
								alt="Erick Profile"
							/>
							<div class="min-w-0 flex-auto">
								<p class="text-sm/6 font-semibold text-gray-900 dark:text-gray-300">
									Erick Anthony
								</p>
								<p class="mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400">
									yo@mo-mail.com
								</p>
							</div>
						</div>
						<div class="shrink-0 sm:flex sm:flex-col sm:items-end">
							<p class="text-sm/6 text-gray-900 dark:text-gray-300">Video & Graphics / Editor</p>
							<p class="mt-1 text-xs/5 text-gray-500 float-end">
								Last seen
								<time datetime="2023-01-23T13:23Z">3h ago</time>
							</p>
						</div>
					</li>
					<li class="flex justify-between gap-x-6 py-5">
						<div class="flex min-w-0 gap-x-4">
							<img
								class="size-12 flex-none rounded-full bg-gray-50"
								src="https://mylastore.sfo3.cdn.digitaloceanspaces.com/media/jocelyn.webp"
								width="400"
								height="400"
								alt="Jocelyn Profile"
							/>
							<div class="min-w-0 flex-auto">
								<p class="text-sm/6 font-semibold text-gray-900 dark:text-gray-300">
									Cinthia McDonal
								</p>
								<p class="mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400">
									my-mail@mail.com
								</p>
							</div>
						</div>
						<div class="shrink-0 sm:flex sm:flex-col sm:items-end">
							<p class="text-sm/6 text-gray-900 dark:text-gray-300 text-right">Designer</p>
							<div class="mt-1 flex items-center gap-x-1.5 float-end">
								<p class="mt-1 text-xs/5 text-gray-500">
									Last seen
									<time datetime="2023-01-23T13:23Z">3h ago</time>
								</p>
							</div>
						</div>
					</li>
					<li class="flex justify-between gap-x-6 py-5">
						<div class="flex min-w-0 gap-x-4">
							<img
								class="size-12 flex-none rounded-full bg-gray-50"
								src="https://mylastore.sfo3.cdn.digitaloceanspaces.com/media/evelyn-md.webp"
								width="400"
								height="400"
								alt="Evelyn Profile"
							/>
							<div class="min-w-0 flex-auto">
								<p class="text-sm/6 font-semibold text-gray-900 dark:text-gray-300">
									Diana Ferguson
								</p>
								<p class="mt-1 truncate text-xs/5 text-gray-500 dark:text-gray-400">
									e-mail@mail.com
								</p>
							</div>
						</div>
						<div class="shrink-0 sm:flex sm:flex-col sm:items-end">
							<p class="text-sm/6 text-gray-900 dark:text-gray-300">Director of Product</p>
							<div class="mt-1 flex items-center gap-x-1.5 float-end">
								<p class="mt-1 text-xs/5 text-gray-500">
									Last seen
									<time datetime="2023-01-23T13:23Z">3h ago</time>
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>

Bur theme

Re-usable components

Our themes are built with re-usable components

CSS table

Have any question?