Based on Mike Bostock's map, created topoJSON from Natural Earth data and population data obtained from the US Census Bureau. Map depicts poverty numbers for those under 18 by county in US, represented with bubbles. County names and poverty population figures are shown on mouseover where available.
A Pen by Amelia Power on CodePen.
A Pen by Tina Hammar on CodePen.
| <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"> |
An example of how you can support dark mode using Tailwind CSS.
Design: https://dribbble.com/shots/14594771-Dashboard-UI
A Pen by Mert Cukuren on CodePen.
| <div id="app"></div> |
| <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> | |
| <div id="root"></div> | |
| </body> |
| <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> |