link rel="stylesheet" href="https://unpkg.com/ano_ui/dist/ano_ui.css" />gt;

>gt;

html>gt;
   head>gt;
     link rel="stylesheet" href="node_modules/anon_ui/dist/anon_ui.css" />gt;
   head>gt;
   body class="bg-primary text-primary">gt;
     h1 class="text-2xl font-bold">gt;Hello Anon UI!h1>gt;
   body>gt;

html>gt;

div class="md-[center bg-success p-6] lg-[left bg-danger p-8]">gt;
  Changes style at different breakpoints!

div>gt;

link rel="stylesheet" href="responsive.css" />gt;

div
   class="center md:left lg:right bg-red-500 md:bg-blue-500 lg:bg-green-500"

>gt;div>gt;

div class="md-[left bg-blue-500] lg-[right bg-green-500]">gt;div>gt;

-->

div class="flex">gt;Flexbox containerdiv>gt;

div class="grid">gt;Grid containerdiv>gt;

div class="block">gt;Block elementdiv>gt;

div class="inline-block">gt;Inline blockdiv>gt;

div class="none">gt;Hidden elementdiv>gt;


-->

div class="flex flex-row">gt;Horizontal flexdiv>gt;

div class="flex flex-column">gt;Vertical flexdiv>gt;

div class="flex flex-row-reverse">gt;Reversed horizontaldiv>gt;

div class="flex flex-column-reverse">gt;Reversed verticaldiv>gt;


-->

div class="flex flex-wrap">gt;Wrapping flex itemsdiv>gt;

div class="flex flex-nowrap">gt;No wrappingdiv>gt;


-->

div class="flex items-start">gt;Align topdiv>gt;

div class="flex items-center">gt;Align centerdiv>gt;

div class="flex items-end">gt;Align bottomdiv>gt;

div class="flex items-stretch">gt;Stretch itemsdiv>gt;

div class="flex items-baseline">gt;Align baselinediv>gt;


-->

div class="flex justify-start">gt;Justify startdiv>gt;

div class="flex justify-center">gt;Justify centerdiv>gt;

div class="flex justify-end">gt;Justify enddiv>gt;

div class="flex justify-between">gt;Space betweendiv>gt;

div class="flex justify-around">gt;Space arounddiv>gt;

div class="grid grid-cols-2">gt;2 columnsdiv>gt;

div class="grid grid-cols-3">gt;3 columnsdiv>gt;

div class="grid grid-cols-4">gt;4 columnsdiv>gt;

div class="grid grid-cols-5">gt;5 columnsdiv>gt;

-->

div class="w-full">gt;Full width (100%)div>gt;

div class="w-auto">gt;Auto widthdiv>gt;

div class="w-screen">gt;Viewport width (100vw)div>gt;


-->

div class="max-w-sm">gt;Small max width (600px)div>gt;

div class="max-w-md">gt;Medium max width (725px)div>gt;

div class="max-w-lg">gt;Large max width (1200px)div>gt;

div class="max-w-xl">gt;XL max width (1450px)div>gt;


-->

div class="h-full">gt;Full height (100%)div>gt;

div class="h-auto">gt;Auto heightdiv>gt;

div class="h-screen">gt;Viewport height (100vh)div>gt;

div class="min-h-screen">gt;Min viewport heightdiv>gt;

div class="rounded-sm">gt;Small radiusdiv>gt;

div class="rounded-md">gt;Medium radiusdiv>gt;

div class="rounded-lg">gt;Large radiusdiv>gt;

div class="rounded-xl">gt;XL radiusdiv>gt;

div class="rounded-full">gt;Full radius (circle)div>gt;

div class="rounded">gt;Default radiusdiv>gt;

-->

div class="p-0">gt;No paddingdiv>gt;

div class="p-1">gt;Padding 1div>gt;

div class="p-2">gt;Padding 2div>gt;

div class="p-4">gt;Padding 4div>gt;

div class="p-8">gt;Padding 8div>gt;

div class="p-12">gt;Padding 12div>gt;

div class="p-16">gt;Padding 16div>gt;


ht) -->

div class="px-2">gt;Horizontal paddingdiv>gt;

div class="px-4">gt;Horizontal padding 4div>gt;

div class="px-8">gt;Horizontal padding 8div>gt;


om) -->

div class="py-2">gt;Vertical paddingdiv>gt;

div class="py-4">gt;Vertical padding 4div>gt;

div class="py-8">gt;Vertical padding 8div>gt;

-->

div class="m-0">gt;No margindiv>gt;

div class="m-2">gt;Margin 2div>gt;

div class="m-4">gt;Margin 4div>gt;

div class="m-8">gt;Margin 8div>gt;


ht) -->

div class="mx-2">gt;Horizontal margindiv>gt;

div class="mx-4">gt;Horizontal margin 4div>gt;

div class="mx-auto">gt;Center with auto marginsdiv>gt;


om) -->

div class="my-2">gt;Vertical margindiv>gt;

div class="my-4">gt;Vertical margin 4div>gt;

div class="my-auto">gt;Vertical auto marginsdiv>gt;

div class="flex gap-1">gt;Small gapdiv>gt;

div class="flex gap-2">gt;Gap 2div>gt;

div class="flex gap-4">gt;Gap 4div>gt;

div class="flex gap-8">gt;Gap 8div>gt;

div class="grid gap-6">gt;Grid gap 6div>gt;

p class="text-xs">gt;Extra small textp>gt;

p class="text-sm">gt;Small textp>gt;

p class="text-base">gt;Base text (default)p>gt;

p class="text-md">gt;Medium textp>gt;

p class="text-lg">gt;Large textp>gt;

p class="text-xl">gt;XL textp>gt;

p class="text-2xl">gt;2XL textp>gt;

p class="text-3xl">gt;3XL textp>gt;

p class="text-4xl">gt;4XL textp>gt;

p class="text-5xl">gt;5XL textp>gt;

p class="light">gt;Light (300)p>gt;

p class="normal">gt;Normal (400)p>gt;

p class="medium">gt;Medium (500)p>gt;

p class="semibold">gt;Semibold (600)p>gt;

p class="bold">gt;Bold (700)p>gt;

p class="left">gt;Left alignedp>gt;

p class="center">gt;Center alignedp>gt;

p class="right">gt;Right alignedp>gt;

p class="uppercase">gt;UPPERCASE TEXTp>gt;

p class="lowercase">gt;lowercase textp>gt;

p class="capitalize">gt;Capitalized Textp>gt;

div class="bg-primary">gt;Primary backgrounddiv>gt;

div class="bg-secondary">gt;Secondary backgrounddiv>gt;

div class="bg-tertiary">gt;Tertiary backgrounddiv>gt;

div class="bg-accent">gt;Accent backgrounddiv>gt;

div class="bg-neutral">gt;Neutral backgrounddiv>gt;

div class="bg-success">gt;Success backgrounddiv>gt;

div class="bg-warning">gt;Warning backgrounddiv>gt;

p class="text-primary">gt;Primary textp>gt;

p class="text-secondary">gt;Secondary textp>gt;

p class="text-tertiary">gt;Tertiary textp>gt;

div class="border-primary">gt;Primary borderdiv>gt;

div class="border-accent">gt;Accent borderdiv>gt;

body class="light">gt;
   -->

body>gt;