neisdev

Dashboard UI

An example of how you can support dark mode using Tailwind CSS.

A responsive table with horizontal scroll showing customers made with Tailwind CSS.

	<div class="p-8" x-data="infiniteScroll()" x-init="init()">
	<template x-for="item in items">
	<div class="bg-red-100 h-64 w-full border-b-2 border-red-300 flex items-center justify-center">
	<h1 class="text-2xl inline" x-text="item"></h1>
	</div>
	</template>


	<div class="bg-white h-64 w-full flex text-pink-600 items-center justify-center" id="infinite-scroll-trigger">
	<svg class="animate-spin -ml-1 mr-3 h-5 w-5 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

	<template>
	<div id="app" class="antialiased min-h-screen pt-8 pb-12 bg-gray-100">
	<transition
	enter-active-class="transition duration-300 ease-out transform"
	enter-class="scale-95 opacity-0 translate-y-16"
	enter-to-class="scale-100 opacity-100 translate-x-0"
	leave-active-class="transition duration-150 ease-in transform"
	leave-class="scale-100 opacity-100"
	leave-to-class="scale-95 opacity-0"
	>

	<body class="bg-cream text-charcoal min-h-screen font-sans leading-normal overflow-x-hidden lg:overflow-auto">
	<main class="flex-1 md:p-0 lg:pt-8 lg:px-8 md:ml-24 flex flex-col">
	<section class="bg-cream-lighter p-4 shadow">
	<div class="md:flex">
	<h2 class="md:w-1/3 uppercase tracking-wide text-sm sm:text-lg mb-6">Create New Location</h2>
	</div>
	<form>
	<div class="md:flex mb-8">
	<div class="md:w-1/3">
	<legend class="uppercase tracking-wide text-sm">Location</legend>