<div class="grid max-w-sm gap-4 p-4 rounded-xl bg-white ring-1 ring-black/5 shadow-md">
    <div class="flex gap-4">
        <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-violet-200 text-black">
            <span class="font-semibold text-lg">RG</span>
        </div>
        <div class="space-y-1">
            <h4 class="font-semibold">Coffee Catch-up?</h4>
            <p class="text-sm text-foreground-500 line-clamp-2">
                Hi Rachel,
                Hope you’re doing well! Are you free for a quick coffee catch-up later this week?
                It’s been a while, and I’d love to catch up on things.
            </p>
        </div>
    </div>
    <LumexDivider />
    <div class="flex gap-4">
        <div class="flex w-12 h-12 items-center justify-center shrink-0 rounded-full bg-sky-200 text-black">
            <span class="font-semibold text-lg">SC</span>
        </div>
        <div class="space-y-1">
            <h4 class="font-semibold">Welcome to the Team!</h4>
            <p class="text-sm text-foreground-500 line-clamp-2">
                Hey Sara,
                Welcome aboard! We’re excited to have you with us. 
                Let me know if you need anything while settling in. 
                Looking forward to working together!
            </p>
        </div>
    </div>
</div>
