OffHealth component library

Shadows 

<div class="flex gap-8 p-6">

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow sm</strong></h2>
        <p>shadow-sm</p>
        <div class="w-20 h-20 bg-gray-500 shadow-sm">
        </div>
    </div>

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow</strong></h2>
        <p>shadow</p>
        <div class="w-20 h-20 bg-gray-500 shadow">
        </div>
    </div>

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow md</strong></h2>
        <p>shadow-md</p>
        <div class="w-20 h-20 bg-gray-500 shadow-md">
        </div>
    </div>

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow lg</strong></h2>
        <p>shadow-lg</p>
        <div class="w-20 h-20 bg-gray-500 shadow-lg">
        </div>
    </div>

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow xl</strong></h2>
        <p>shadow-xl</p>
        <div class="w-20 h-20 bg-gray-500 shadow-xl">
        </div>
    </div>

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow 2xl</strong></h2>
        <p>shadow-2xl</p>
        <div class="w-20 h-20 bg-gray-500 shadow-2xl">
        </div>
    </div>

    <div class="grid gap-">
        <h2 class="text-lg"><strong>Shadow inner</strong></h2>
        <p>shadow-inner</p>
        <div class="w-20 h-20 bg-gray-500 shadow-inner">
        </div>
    </div>

</div>
 
<div class="flex gap-8 p-6">
{% for shadow in shadows %}
    <div class="grid gap-">
        <h2 class="text-lg"><strong>{{ shadow.name }}</strong></h2>
        <p>{{ shadow.class }}</p>
        <div class="w-20 h-20 bg-gray-500 {{ shadow.class }}">
        </div>
    </div>
{% endfor %}
</div>
 
{
  "shadows": [
    {
      "name": "Shadow sm",
      "class": "shadow-sm"
    },
    {
      "name": "Shadow",
      "class": "shadow"
    },
    {
      "name": "Shadow md",
      "class": "shadow-md"
    },
    {
      "name": "Shadow lg",
      "class": "shadow-lg"
    },
    {
      "name": "Shadow xl",
      "class": "shadow-xl"
    },
    {
      "name": "Shadow 2xl",
      "class": "shadow-2xl"
    },
    {
      "name": "Shadow inner",
      "class": "shadow-inner"
    }
  ]
}

Box shadows

Learn more