Used for listing drugs for a resident. Can have several general statuses.

(Methotrexate)
Take 1 tablet weekly on Monday [PO]

(Atenolol)
[PO]
12:03 by Renee Watson
11:59 by Renee Watson

(Buprenorphine)
[TOP]

(Glyceryl trinitrate)
Apply ONE patch to the skin in the morning and remove at night [TOP]
<div class="font-whitney w-full bg-mm-purple-800 px-5 md:px-8 lg:px-16 xl:px-24 py-16">
<div class="w-full max-w-2xl mx-auto">
<div class="flex justify-between items-end mb-4">
<h2 class="text-2xl text-white font-bold">14:00 MPS Packed <span class="font-normal">(4)</span></h2>
<div class="mm-admin-card__controls flex mr-3">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-bold leading-tight uppercase p-2.5 w-36 bg-mm-teal mr-1.5 opacity-20">Administer all</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center text-white"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
<div class="w-full grid grid-cols-1 gap-2">
<!-- Standard card -->
<div class="mm-admin-card flex flex-col shadow-sm">
<div class="mm-admin-card__inner bg-white flex w-full items-center p-3.5 pr-3">
<div class="mm-admin-card__image flex-shrink-0 inline-flex w-24 h-16 mr-3">
<img class="block w-full h-full content-contain" src="/static/drugs/drug-1.png">
</div>
<div class="mm-admin-card__text flex flex-col w-full mr-3">
<h3 class="mm-admin-card__drug-name text-mm-drug-purple font-bold text-base leading-tight"><img class="inline w-4 h-4 mr-1" src="/static/drug-symbols/icon-cytotoxic.svg">WARFARIN TAB 10mg</h3>
<p class="mm-admin-card__drug-details text-base leading-tight">(Methotrexate)<br>
Take 1 tablet weekly on Monday [PO]</p>
<ul class="mm-admin-card__tags mt-2 -mb-1 flex flex-wrap">
<li class="inline-flex items-center rounded-full bg-mm-purple-400 p-1 pr-3 mr-0.5 mb-1">
<span class="flex-shrink-0 flex w-5 h-5 rounded-full bg-white mr-0.5">
<img class="block w-full h-full content-contain" src="/static/tags/tag-test-required.svg">
</span>
<span class="p-1 leading-none text-sm font-bold">INR Test required</span>
</li>
<li class="inline-flex items-center rounded-full bg-mm-purple-400 p-1 pr-3 mr-0.5 mb-1">
<span class="flex-shrink-0 flex w-5 h-5 rounded-full bg-white mr-0.5">
<img class="block w-full h-full content-contain" src="/static/tags/tag-do-not-crush.svg">
</span>
<span class="p-1 leading-none text-sm font-bold">Do not crush</span>
</li>
</ul>
</div>
<div class="mm-admin-card__controls flex ml-auto">
<input class="mm-admin-card__quantity inline-flex w-12 text-base leading-tight text-center border-2 border-gray-300 mr-2 p-2.5 px-1" type="number" value="1">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-bold leading-tight uppercase p-2.5 w-36 bg-mm-teal mr-1.5">Administer</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
<div class="w-full p-2 bg-mm-green-100 text-center text-black font-medium text-base">
Second check by Nolan White at 12:32 on 17 Aug 2021
</div>
</div>
<!-- End standard card -->
<!-- Second check card -->
<div class="mm-admin-card bg-white shadow-sm flex w-full items-center p-3.5 pr-3">
<div class="mm-admin-card__image flex-shrink-0 inline-flex w-24 h-16 mr-3">
<img class="block w-full h-full content-contain" src="/static/drugs/drug-2.png">
</div>
<div class="mm-admin-card__text flex flex-col w-full mr-3">
<h3 class="mm-admin-card__drug-name text-mmblack font-bold text-base leading-tight">METFORMIN TAB 50mg</h3>
<p class="mm-admin-card__drug-details text-base leading-tight">(Atenolol)<br>
[PO]</p>
</div>
<div class="mm-admin-card__controls flex ml-auto">
<input class="mm-admin-card__quantity inline-flex w-12 text-base leading-tight text-center border-2 border-gray-300 mr-2 p-2.5 px-1" type="number" value="1">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-bold leading-tight uppercase p-2.5 w-36 bg-mm-teal mr-1.5">Second check</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
<!-- End second check card -->
<!-- Completed card -->
<div class="mm-admin-card bg-mm-purple-100 shadow-sm flex w-full items-center p-3.5 pr-3">
<div class="mm-admin-card__image flex-shrink-0 inline-flex items-center justify-center w-24 h-16 bg-transparent mr-3">
<span class="flex w-7 h-7 items-center justify-center rounded-full bg-mm-green-500">
<span class="material-icons text-xl">done</span>
</span>
</div>
<div class="mm-admin-card__text flex flex-col w-full mr-3">
<h3 class="mm-admin-card__drug-name text-mmblack font-bold text-base leading-tight">VITAL CALCIUM TAB 600mg</h3>
<p class="mm-admin-card__drug-details text-base leading-tight">12:03 by Renee Watson</p>
</div>
<div class="mm-admin-card__controls flex ml-auto">
<input class="mm-admin-card__quantity inline-flex w-12 text-base leading-tight text-center border-2 border-gray-300 bg-transparent mr-2 p-2.5 px-1" type="number" value="1" disabled="disabled">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-normal leading-tight uppercase w-36 mr-1.5" disabled="disabled">Administered</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
<!-- End Completed card -->
<!-- Refused card -->
<div class="mm-admin-card bg-mm-purple-100 shadow-sm flex w-full items-center p-3.5 pr-3">
<div class="mm-admin-card__image flex-shrink-0 inline-flex items-center justify-center w-24 h-16 bg-transparent mr-3">
<span class="flex w-7 h-7 items-center justify-center rounded-full bg-mm-red-600">
<span class="material-icons text-xl text-white">close</span>
</span>
</div>
<div class="mm-admin-card__text flex flex-col w-full mr-3">
<h3 class="mm-admin-card__drug-name text-mmblack font-bold text-base leading-tight">DISPIRIN DIRECT-CHEW TAB 300mg</h3>
<p class="mm-admin-card__drug-details text-base leading-tight">11:59 by Renee Watson</p>
</div>
<div class="mm-admin-card__controls flex ml-auto">
<input class="mm-admin-card__quantity inline-flex w-12 text-base leading-tight text-center border-2 border-gray-300 bg-transparent mr-2 p-2.5 px-1" type="number" value="1" disabled="disabled">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-normal leading-tight uppercase w-36 mr-1.5" disabled="disabled">Refused</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
<!-- End Refused card -->
</div>
<div class="flex justify-between items-end mt-8 mb-4">
<h2 class="text-2xl text-white font-bold">14:00 Patches <span class="font-normal">(1)</span></h2>
</div>
<div class="w-full grid grid-cols-1 gap-2">
<!-- Applied patch card -->
<div class="mm-admin-card flex flex-col items-start">
<span class="flex w-auto px-5 py-2 leading-tight text-base text-mm-purple-900 font-bold bg-mm-purple-400 rounded-tl-2xl rounded-tr-2xl">Applied to left arm by Renee Watson on 12 Aug 2021</span>
<div class="mm-admin-card__inner bg-white shadow-sm flex w-full items-center p-3.5 pr-3">
<div class="mm-admin-card__image flex-shrink-0 inline-flex w-24 h-16 mr-3">
<img class="block w-full h-full content-contain" src="/static/drugs/patch-1.png">
</div>
<div class="mm-admin-card__text flex flex-col w-full mr-3">
<h3 class="mm-admin-card__drug-name text-mm-drug-green font-bold text-base leading-tight"><img class="inline w-4 h-4 mr-1" src="/static/drug-symbols/icon-cd.svg">NORSPAN PTCH 10mcg/hr</h3>
<p class="mm-admin-card__drug-details text-base leading-tight">(Buprenorphine)<br>
[TOP]</p>
</div>
<div class="mm-admin-card__controls flex ml-auto">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-bold leading-tight uppercase p-2.5 w-36 bg-mm-teal mr-1.5">Sight</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
</div>
<!-- End Applied patch card -->
<!-- Ceased patch card -->
<div class="mm-admin-card flex flex-col items-start opacity-40">
<div class="mm-admin-card__inner bg-white shadow-sm flex w-full items-center p-3.5 pr-3">
<div class="mm-admin-card__image flex-shrink-0 inline-flex w-24 h-16 mr-3">
<img class="block w-full h-full content-contain" src="/static/drugs/patch-2.png">
</div>
<div class="mm-admin-card__text flex flex-col w-full mr-3">
<h3 class="mm-admin-card__drug-name text-black font-bold text-base leading-tight line-through">TRANSIDERM NITRO 25 PTCH 5mg</h3>
<p class="mm-admin-card__drug-details text-base leading-tight">(Glyceryl trinitrate)<br>
Apply ONE patch to the skin in the morning and remove at night [TOP]</p>
</div>
<div class="mm-admin-card__controls flex ml-auto">
<button class="mm-admin-card__button inline-flex items-center justify-center text-base font-normal leading-tight uppercase p-2.5 w-36 mr-1.5">Ceased</button>
<button class="mm-admin-card__more opacity-60 inline-flex items-center"><span class="material-icons inline-flex text-2xl">more_vert</span><span class="sr-only">More</span></button>
</div>
</div>
</div>
<!-- End Ceased patch card -->
</div>
</div>
</div>