forked from mrwyndham/fastpocket
42 lines
1.6 KiB
Markdown
42 lines
1.6 KiB
Markdown
---
|
|
sidebar_position: 2
|
|
---
|
|
|
|
# A Button On Gradient Background
|
|
|
|
|
|
|
|
```jsx title="Frontend/sections/AnnouncementBanners/AButtonOnGradientBackground.tsx"
|
|
<>
|
|
{/* <!-- Announcement Banner --> */}
|
|
<div className="bg-gradient-to-r from-secondary via-accent to-primary">
|
|
<div className="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
|
|
{/* <!-- Grid --> */}
|
|
<div className="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
|
|
<div className="text-center md:text-start">
|
|
<p className="text-xs text-base-100/[.8] uppercase tracking-wider">
|
|
Preview of Preline
|
|
</p>
|
|
<p className="mt-1 text-base-100 font-medium">
|
|
Sign up to get unlimited updates. No credit card required.
|
|
</p>
|
|
</div>
|
|
{/* <!-- End Col --> */}
|
|
|
|
<div className="mt-3 text-center md:text-start md:flex md:justify-end md:items-center">
|
|
<a
|
|
className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-base-200 bg-base-100 text-secondary-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1"
|
|
href="#"
|
|
>
|
|
Sign up free
|
|
</a>
|
|
</div>
|
|
{/* <!-- End Col --> */}
|
|
</div>
|
|
{/* <!-- End Grid --> */}
|
|
</div>
|
|
</div>
|
|
{/* <!-- End Announcement Banner --> */}
|
|
</>
|
|
```
|