neisdev

Alpine single upload with croppie

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

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

	<body class="antialiased sans-serif">
	<div class="border-t-8 border-gray-700 h-2"></div>
	<div
	class="container mx-auto py-6 px-4"
	x-data="invoices()"
	x-init="generateInvoiceNumber(111111, 999999);"
	x-cloak
	>
	<div class="flex justify-between">
	<h2 class="text-2xl font-bold mb-6 pb-2 tracking-wider uppercase">Invoice</h2>

	<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>