<div class="flex justify-center p-6">
<div class="w-full max-w-xs rounded bg-gray-50 p-4 text-sm text-gray-700">
💡 Trying a new fitness routine? Break a sweat with our workout
<a href="#" class="font-medium underline">tips here.</a>
</div>
</div>
<div class="flex justify-center p-6">
<div class="w-full max-w-xl rounded-lg border border-gray-200 bg-white bg-gradient-to-b from-transparent via-gray-50 to-gray-50 p-6">
<h4 class="text-base font-semibold text-gray-900">Uncover Deeper Insights with InsightHub</h4>
<p class="mt-1 text-sm text-gray-600">
Supercharge your decision-making with real-time analytics. Dive into user behavior, monitor key metrics, and enhance your strategy. Enjoy
custom dashboards, predictive analytics, and seamless integrations. Upgrade to InsightHub for unparalleled analytics precision.
</p>
<button
class="relative mt-4 inline-flex h-10 items-center justify-center space-x-2 whitespace-nowrap rounded-lg bg-gray-950 bg-gradient-to-b from-white/15 to-transparent px-4 text-center text-sm font-medium text-white transition before:absolute before:inset-0 before:rounded-lg before:shadow-inner before:shadow-white/40 hover:bg-gray-900 focus:outline-0 focus-visible:ring-1 focus-visible:ring-gray-500 disabled:pointer-events-none disabled:opacity-75"
>
Upgrade Now
</button>
</div>
</div>
<div class="p-6">
<div class="border-y border-gray-300 py-4">
<div class="inline-flex items-center space-x-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0 text-gray-900">
<path
d="M3.5 2.75a.75.75 0 00-1.5 0v14.5a.75.75 0 001.5 0v-4.392l1.657-.348a6.449 6.449 0 014.271.572 7.948 7.948 0 005.965.524l2.078-.64A.75.75 0 0018 12.25v-8.5a.75.75 0 00-.904-.734l-2.38.501a7.25 7.25 0 01-4.186-.363l-.502-.2a8.75 8.75 0 00-5.053-.439l-1.475.31V2.75z"
/>
</svg>
<span class="text-sm font-semibold text-gray-900">Note</span>
</div>
<div class="mt-0.5 text-sm text-gray-900">Please review the attached document and provide your feedback by the end of the week.</div>
</div>
</div>