Outline

<div class="flex flex-wrap gap-4">
	<div class="rounded-xl w-20 h-20 has-border" />
	<div class="rounded-xl w-20 h-20 has-border success" />
	<div class="rounded-xl w-20 h-20 has-border warn" />
	<div class="rounded-xl w-20 h-20 has-border danger" />
</div>

<div className='flex flex-wrap gap-4'>
  <div className='rounded-xl w-20 h-20 has-border' />
  <div className='rounded-xl w-20 h-20 has-border success' />
  <div className='rounded-xl w-20 h-20 has-border warn' />
  <div className='rounded-xl w-20 h-20 has-border danger' />
</div>

<div class="flex flex-wrap gap-4">
	<div class="rounded-xl w-20 h-20 has-ring" />
	<div class="rounded-xl w-20 h-20 has-ring success" />
	<div class="rounded-xl w-20 h-20 has-ring warn" />
	<div class="rounded-xl w-20 h-20 has-ring danger" />
</div>

<div className='flex flex-wrap gap-4'>
  <div className='rounded-xl w-20 h-20 has-ring' />
  <div className='rounded-xl w-20 h-20 has-ring success' />
  <div className='rounded-xl w-20 h-20 has-ring warn' />
  <div className='rounded-xl w-20 h-20 has-ring danger' />
</div>