Indicator

<div class="$$indicator">
  <span class="$$indicator-item $$status $$status-success"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-primary">New</span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">12</span>
  <button class="$$btn">inbox</button>
</div>

<div class="$$tabs $$tabs-lift">
  <a class="$$tab">Messages</a>
  <a class="$$indicator $$tab $$tab-active">
    Notifications
    <span class="$$indicator-item $$badge">8</span>
  </a>
  <a class="$$tab">Requests</a>
</div>

<div class="$$avatar $$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary">Justice</span>
  <div class="h-20 w-20 rounded-lg">
    
  </div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$badge">Required</span>
  <input type="text" placeholder="Your email address" class="$$input $$input-bordered" />
</div>

<div class="$$indicator">
  <div class="$$indicator-item $$indicator-bottom">
    <button class="$$btn $$btn-primary">Apply</button>
  </div>
  <div class="$$card border-base-300 border shadow-sm">
    <div class="$$card-body">
      <h2 class="$$card-title">Job Title</h2>
      <p>Rerum reiciendis beatae tenetur excepturi</p>
    </div>
  </div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$indicator-middle">
    Only available for Pro users
  </span>
  
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$indicator-start $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$indicator-center $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-start $$badge $$badge-secondary"
  ></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-middle $$indicator-center $$badge $$badge-secondary"
  ></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$indicator-middle $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-start $$badge $$badge-secondary"
  ></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-bottom $$indicator-center $$badge $$badge-secondary"
  ></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$indicator-bottom $$badge $$badge-secondary"></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>

<div class="$$indicator">
  <span class="$$indicator-item $$indicator-top $$indicator-start $$badge">↖︎</span>
  <span class="$$indicator-item $$indicator-top $$indicator-center $$badge">↑</span>
  <span class="$$indicator-item $$indicator-top $$indicator-end $$badge">↗︎</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-start $$badge">←</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-center $$badge">●</span>
  <span class="$$indicator-item $$indicator-middle $$indicator-end $$badge">→</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-start $$badge">↙︎</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-center $$badge">↓</span>
  <span class="$$indicator-item $$indicator-bottom $$indicator-end $$badge">↘︎</span>
  <div class="bg-base-300 grid h-32 w-60 place-items-center">Box</div>
</div>

<div class="$$indicator">
  <span
    class="$$indicator-item $$indicator-start sm:$$indicator-middle md:$$indicator-bottom lg:$$indicator-center xl:$$indicator-end $$badge $$badge-secondary"
  ></span>
  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
</div>