<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" href="./tailwind.css" />
  </head>
  <body>
    <div class="basic-example"></div>
    <div class="class-order"></div>
    <div class="with-additional-properties"></div>
    <div class="variants"></div>
    <div class="only-variants"></div>
    <div class="apply-group-variant"></div>
    <div class="apply-dark-variant"></div>
    <div class="apply-custom-utility"></div>
    <div class="multiple selectors"></div>
    <div class="multiple-variants selectors-variants"></div>
    <div class="multiple-group selectors-group"></div>
    <div class="complex-utilities"></div>
    <div class="basic-nesting-parent">
      <div class="basic-nesting-child"></div>
    </div>
    <div class="use-base-only-a"></div>
    <div class="use-dependant-only-b"></div>
    <div class="btn"></div>
    <div class="btn-blue"></div>
    <div class="recursive-apply-a"></div>
    <div class="recursive-apply-b"></div>
    <div class="recursive-apply-c"></div>
    <div class="use-with-other-properties-base use-with-other-properties-component"></div>
    <div class="add-sibling-properties"></div>
    <div class="important-modifier"></div>
    <div class="important-modifier-variant"></div>
    <div class="a b"></div>
    <div class="foo"></div>
    <div class="bar"></div>
  </body>
</html>