CTA Sections
- Default CTA section
- Image with CTA button
- Heading with CTA button
- QR code CTA
- Card CTAs with icons
- Financial trading CTA
- Email sign-up CTA
- Mobile app download
- CTA with two cards and images
- CTA section with tabs and mobile app
The CTA (call to action) website sections can be used anywhere on your website to encourage your users to take any action, such as creating a new account.
Default CTA section
Use this example to show a simple heading, paragraph, and a couple of CTA buttons to encourage users to take action.
Default CTA section
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="max-w-screen-md">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Let's find more that brings us together.
</h2>
<p class="mb-8 font-light text-gray-500 sm:text-xl dark:text-gray-400">
Flowbite helps you connect with friends, family and communities of
people who share your interests. Connecting with your friends and family
as well as discovering new ones is easy with features like Groups, Watch
and Marketplace.
</p>
<div
class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4"
>
<a
href="#"
class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900"
>
Get started
</a>
<a
href="#"
class="inline-flex items-center justify-center px-4 py-2.5 text-base font-medium text-center text-gray-900 border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
>
<svg
class="mr-2 -ml-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
></path>
</svg>
View more
</a>
</div>
</div>
</div>
</section>
<!-- Block end -->Image with CTA button
Use this example to show an image or app screenshot next to the CTA button to provide additional visual impact.
Image with CTA button
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6"
>
<img
class="w-full dark:hidden"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup.svg"
alt="dashboard image"
/>
<img
class="w-full hidden dark:block"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-dashboard-mockup-dark.svg"
alt="dashboard image"
/>
<div class="mt-4 md:mt-0">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Let's create more tools and ideas that brings us together.
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Flowbite helps you connect with friends and communities of people who
share your interests. Connecting with your friends and family as well as
discovering new ones is easy with features like Groups.
</p>
<a
href="#"
class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900"
>
Get started
<svg
class="ml-2 -mr-1 w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Block end -->Heading with CTA button
Use this simple yet effective CTA section with a heading, short paragraph, and a button to encourage users to start a free trial.
Heading with CTA button
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white"
>
Start your free trial today
</h2>
<p class="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">
Try Flowbite Platform for 30 days. No credit card required.
</p>
<a
href="#"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>Free trial for 30 days</a
>
</div>
</div>
</section>
<!-- Block end -->QR code CTA
Use this example to show a QR (quick response) code that your users can scan with their device and interact with another page or application.
QR code CTA
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Trade. Anywhere.
</h2>
<p
class="mb-6 lg:mb-8 font-light text-gray-500 dark:text-gray-400 md:text-lg"
>
Compatible with multiple devices, start trading with safety and
convenience.
</p>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/qr-code.svg"
class="dark:hidden w-56 mx-auto"
alt="qr code"
/>
<img
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/qr-code-dark.svg"
class="hidden dark:block w-56 mx-auto"
alt="qr code"
/>
</div>
</div>
</section>
<!-- Block end -->Card CTAs with icons
Use this website section to show multiple cards CTA elements with icons alongside a heading and paragraphs.
Card CTAs with icons
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
We didn't reinvent the wheel
</h2>
<p class="mb-3 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
Track work across the enterprise through an open, collaborative platform.
Link issues across Jira and ingest data from other software development
tools, so your IT support and operations teams have richer contextual
information to rapidly respond to requests, incidents, and changes.
</p>
<p class="mb-8 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
Deliver great service experiences fast - without the complexity of
traditional ITSM solutions.Accelerate critical development work, eliminate
toil, and deploy changes with ease.
</p>
<div class="grid gap-8 lg:grid-cols-2">
<a
href="#"
class="inline-flex justify-center items-center p-5 text-base font-medium text-gray-500 bg-gray-50 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
class="mr-3 w-5 h-5"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.5199 12.9424C24.4458 13.4528 24.1092 14.1463 23.723 14.7492C23.2358 15.51 22.4627 16.0428 21.5779 16.2278L17.6802 17.0429C17.0537 17.1739 16.4857 17.5017 16.0592 17.9785L13.5035 20.8352C13.0232 21.3721 12.6875 21.244 12.6875 20.5239C12.6817 20.5506 11.4191 23.8067 14.7651 25.7366C16.0507 26.4782 17.9013 26.2117 19.1869 25.4702L25.9988 21.5411C28.5463 20.0717 30.345 17.5859 30.9428 14.7084C30.9665 14.5946 30.9848 14.4803 31.0045 14.3662L24.5199 12.9424Z"
fill="url(#paint0_linear_4151_62980)"
/>
<path
d="M22.7528 9.01774C24.0384 9.75928 24.5637 10.8633 24.5637 12.3464C24.5637 12.5477 24.5479 12.7466 24.5194 12.9425L27.2641 14.1215L31.004 14.3663C31.4829 11.5948 30.5444 8.74202 28.862 6.47445C27.5959 4.768 25.9667 3.28713 24.0081 2.15738C22.417 1.23966 20.7636 0.635005 19.1025 0.303223L17.2361 2.72023L16.6465 5.49559L22.7528 9.01774Z"
fill="url(#paint1_linear_4151_62980)"
/>
<path
d="M0.783353 11.0516C0.782654 11.0537 0.784588 11.0544 0.785316 11.0522C0.929339 10.6202 1.10993 10.1383 1.33539 9.62344C2.5131 6.93406 4.78262 5.14038 7.57467 4.22583C10.3667 3.31131 13.4153 3.63188 15.9599 5.09963L16.6463 5.49553L19.1023 0.303168C11.2907 -1.25701 3.30703 3.33229 0.793284 11.0215C0.792083 11.0251 0.787713 11.038 0.783353 11.0516Z"
fill="url(#paint2_linear_4151_62980)"
/>
<path
d="M18.9201 25.4702C17.6345 26.2117 16.0506 26.2117 14.765 25.4702C14.5904 25.3695 14.4259 25.2563 14.2703 25.1338L12.0093 26.6883L10.0605 29.8374C12.2236 31.6374 15.0324 32.2161 17.8392 31.8943C19.9515 31.6521 22.0498 30.9829 24.0084 29.8532C25.5995 28.9355 26.9503 27.8073 28.0685 26.5359L26.9065 23.7126L25.0265 21.948L18.9201 25.4702Z"
fill="url(#paint3_linear_4151_62980)"
/>
<path
d="M14.2694 25.1339C13.2789 24.3537 12.6864 23.157 12.6864 21.8752V21.7474V11.0722C12.6864 10.4685 12.8643 10.3659 13.3876 10.6677C12.5816 10.2028 10.7195 8.60676 8.42044 9.9329C7.13484 10.6744 6.07617 12.3113 6.07617 13.7944V21.6526C6.07617 24.5915 7.59833 27.657 9.79375 29.613C9.88059 29.6904 9.97049 29.7633 10.0596 29.8375L14.2694 25.1339Z"
fill="url(#paint4_linear_4151_62980)"
/>
<path
d="M27.9097 5.31206C27.9081 5.31036 27.9066 5.31173 27.9081 5.31343C28.2106 5.65404 28.538 6.05126 28.8716 6.50375C30.614 8.8674 31.2651 11.8611 30.6618 14.734C30.0586 17.607 28.2564 20.0843 25.7118 21.5521L25.0254 21.948L28.0674 26.5359C33.3256 20.5574 33.3392 11.3552 27.9308 5.3357C27.9282 5.33282 27.9193 5.32262 27.9097 5.31206Z"
fill="url(#paint5_linear_4151_62980)"
/>
<path
d="M6.34355 13.7944C6.34354 12.3113 7.13551 10.9408 8.42113 10.1993C8.59564 10.0986 8.77601 10.0129 8.96002 9.93951L8.74304 7.20603L7.21861 4.07861C4.57671 5.05005 2.4397 7.05766 1.31528 9.64708C0.469097 11.5957 9.792e-06 13.7458 0 16.0052C0 17.8407 0.302549 19.5735 0.845532 21.1767L3.87391 21.583L6.34355 20.8387V13.7944Z"
fill="url(#paint6_linear_4151_62980)"
/>
<path
d="M8.96016 9.93951C10.1317 9.47264 11.4653 9.5584 12.5764 10.1993L12.6872 10.2632L21.5826 15.3941C22.2066 15.754 22.1499 16.1082 21.4446 16.2557L21.9578 16.1484C22.633 16.0072 23.2499 15.6621 23.7217 15.1592C24.5328 14.2946 24.8306 13.2515 24.8306 12.3463C24.8306 10.8632 24.0386 9.49274 22.753 8.7512L15.9411 4.82209C13.3936 3.35267 10.3395 3.03934 7.54622 3.96083C7.43572 3.99727 7.32756 4.0386 7.21875 4.07861L8.96016 9.93951Z"
fill="url(#paint7_linear_4151_62980)"
/>
<path
d="M19.3224 31.6521C19.3246 31.6516 19.3242 31.6496 19.3219 31.6501C18.8755 31.7414 18.3674 31.8262 17.8084 31.8885C14.8882 32.2142 11.9677 31.2807 9.77888 29.3223C7.59011 27.3638 6.34372 24.5659 6.34372 21.6304L6.34371 20.8386L0.845703 21.1766C3.39905 28.7153 11.3691 33.3282 19.2913 31.6585C19.2951 31.6577 19.3084 31.6551 19.3224 31.6521Z"
fill="url(#paint8_linear_4151_62980)"
/>
<defs>
<linearGradient
id="paint0_linear_4151_62980"
x1="20.0604"
y1="23.7696"
x2="23.2079"
y2="12.8065"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint1_linear_4151_62980"
x1="27.3093"
y1="10.4001"
x2="19.0297"
y2="2.14962"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint2_linear_4151_62980"
x1="16.1642"
y1="5.0209"
x2="3.67407"
y2="5.81015"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint3_linear_4151_62980"
x1="15.32"
y1="28.6624"
x2="26.5369"
y2="25.6356"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint4_linear_4151_62980"
x1="7.26808"
y1="15.6825"
x2="15.2317"
y2="23.9345"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint5_linear_4151_62980"
x1="25.4497"
y1="21.6353"
x2="31.0061"
y2="10.4342"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint6_linear_4151_62980"
x1="5.36387"
y1="9.13067"
x2="2.39054"
y2="20.3063"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint7_linear_4151_62980"
x1="20.5432"
y1="8.59912"
x2="9.6778"
y2="11.3044"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint8_linear_4151_62980"
x1="6.40691"
y1="21.3563"
x2="13.3327"
y2="31.7743"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
<span class="w-full"
>Explore Flowbite and take your marketplace to the next level.</span
>
<svg
class="ml-3 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="inline-flex justify-center items-center p-5 text-base font-medium text-gray-500 bg-gray-50 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
class="mr-3 w-5 h-5"
viewBox="0 0 22 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_4151_63004)">
<path
d="M5.50085 30.1242C8.53625 30.1242 10.9998 27.8749 10.9998 25.1035V20.0828H5.50085C2.46546 20.0828 0.00195312 22.332 0.00195312 25.1035C0.00195312 27.8749 2.46546 30.1242 5.50085 30.1242Z"
fill="#0ACF83"
/>
<path
d="M0.00195312 15.062C0.00195312 12.2905 2.46546 10.0413 5.50085 10.0413H10.9998V20.0827H5.50085C2.46546 20.0827 0.00195312 17.8334 0.00195312 15.062Z"
fill="#A259FF"
/>
<path
d="M0.00195312 5.02048C0.00195312 2.24904 2.46546 -0.000244141 5.50085 -0.000244141H10.9998V10.0412H5.50085C2.46546 10.0412 0.00195312 7.79193 0.00195312 5.02048Z"
fill="#F24E1E"
/>
<path
d="M11 -0.000244141H16.4989C19.5343 -0.000244141 21.9978 2.24904 21.9978 5.02048C21.9978 7.79193 19.5343 10.0412 16.4989 10.0412H11V-0.000244141Z"
fill="#FF7262"
/>
<path
d="M21.9978 15.062C21.9978 17.8334 19.5343 20.0827 16.4989 20.0827C13.4635 20.0827 11 17.8334 11 15.062C11 12.2905 13.4635 10.0413 16.4989 10.0413C19.5343 10.0413 21.9978 12.2905 21.9978 15.062Z"
fill="#1ABCFE"
/>
</g>
<defs>
<clipPath id="clip0_4151_63004">
<rect
width="22"
height="30.1244"
fill="white"
transform="translate(0 -0.000244141)"
/>
</clipPath>
</defs>
</svg>
<span class="w-full">Get started with our Figma Design System</span>
<svg
class="ml-3 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="inline-flex justify-center items-center p-5 text-base font-medium text-gray-500 bg-gray-50 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
class="mr-3 w-5 h-5"
viewBox="0 0 26 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_4151_62985)">
<path
d="M25.7689 0.901322L15.1763 3.49437C15.0758 3.51776 14.9717 3.52086 14.87 3.50352C14.7683 3.48617 14.6711 3.44871 14.5841 3.39335L9.57667 0.121964C9.48513 0.0624589 9.38179 0.0234753 9.27373 0.00769593C9.16568 -0.00808342 9.05549 -0.000283916 8.95074 0.0305577L0.284074 2.58031C0.204603 2.59938 0.133665 2.64415 0.0822909 2.70766C0.030917 2.77117 0.001987 2.84986 0 2.9315L0 8.11761L8.95074 5.48607C9.05549 5.45522 9.16568 5.44743 9.27373 5.4632C9.38179 5.47898 9.48513 5.51797 9.57667 5.57747L14.5841 8.84404C14.6701 8.90151 14.7674 8.94022 14.8694 8.95762C14.9715 8.97503 15.076 8.97075 15.1763 8.94507L26 6.2991V1.07451C25.9987 1.02559 25.9784 0.979095 25.9433 0.944943C25.9082 0.91079 25.8612 0.891685 25.8122 0.891701L25.7689 0.901322Z"
fill="#FF7F66"
/>
<path
d="M19.377 13.3953L15.1737 14.4056C15.0733 14.4301 14.969 14.4338 14.8671 14.4164C14.7652 14.399 14.668 14.361 14.5815 14.3046L9.57406 11.0332C9.5541 11.0191 9.53145 11.0092 9.50752 11.0042C9.48359 10.9993 9.45888 10.9992 9.43495 11.0042C9.41101 11.0092 9.38835 11.019 9.36838 11.0331C9.34841 11.0472 9.33156 11.0652 9.31887 11.0861C9.29667 11.1132 9.28474 11.1473 9.28517 11.1823V16.1038C9.28501 16.164 9.2999 16.2232 9.32849 16.2762C9.35708 16.3291 9.39846 16.374 9.44887 16.4069L14.5815 19.7745C14.6684 19.8301 14.7658 19.8673 14.8676 19.8839C14.9695 19.9004 15.0736 19.8959 15.1737 19.8707L19.6178 18.8075C20.336 18.6343 20.9753 18.2254 21.4335 17.6463C21.8918 17.0672 22.1425 16.3514 22.1455 15.6131V15.5121C22.1367 14.9234 21.8944 14.3624 21.472 13.952C21.0495 13.5416 20.4814 13.3154 19.8922 13.3232C19.7183 13.3283 19.5456 13.3525 19.377 13.3953Z"
fill="#FF7F66"
/>
<path
d="M19.377 24.3062L15.1737 25.3165C15.0732 25.3399 14.9691 25.343 14.8674 25.3256C14.7657 25.3083 14.6685 25.2708 14.5815 25.2154L9.57405 21.9441C9.55416 21.9304 9.53176 21.9208 9.50814 21.9158C9.48452 21.9108 9.46015 21.9106 9.43643 21.915C9.41271 21.9195 9.39011 21.9286 9.36993 21.9419C9.34975 21.9551 9.3324 21.9722 9.31886 21.9922C9.29698 22.0213 9.28516 22.0568 9.28516 22.0932V27.0147C9.285 27.0748 9.29989 27.1341 9.32848 27.187C9.35707 27.24 9.39845 27.2849 9.44886 27.3178L14.5815 30.6854C14.6675 30.7429 14.7647 30.7816 14.8668 30.799C14.9688 30.8164 15.0734 30.8121 15.1737 30.7864L19.6178 29.7184C20.3368 29.5467 20.9771 29.1383 21.4356 28.5588C21.8941 27.9794 22.1442 27.2627 22.1455 26.524V26.423C22.1367 25.8343 21.8944 25.2732 21.4719 24.8628C21.0495 24.4525 20.4813 24.2263 19.8922 24.234C19.7181 24.2368 19.5451 24.261 19.377 24.3062Z"
fill="#FF7F66"
/>
<path
opacity="0.32"
d="M14.8613 19.8659V14.4344C14.9661 14.4561 15.0743 14.4561 15.1791 14.4344L16.9895 13.9533L18.0487 19.149L15.1598 19.8514C15.0625 19.8774 14.9607 19.8823 14.8613 19.8659ZM19.108 24.3544L15.1791 25.3166C15.0743 25.3382 14.9661 25.3382 14.8613 25.3166V30.7913C14.9661 30.813 15.0743 30.813 15.1791 30.7913L20.1673 29.5694L19.108 24.3544ZM14.8613 8.95966C14.9661 8.98131 15.0743 8.98131 15.1791 8.95966L15.935 8.77685L14.8613 3.50415V8.95966Z"
fill="#111928"
/>
<g opacity="0.16">
<path
opacity="0.16"
d="M9.28516 5.4665C9.38726 5.48597 9.48508 5.52344 9.57404 5.57715L14.5815 8.84853C14.6641 8.90343 14.7578 8.93956 14.8559 8.95437V3.49886C14.7578 3.48404 14.6641 3.44792 14.5815 3.39302L9.57404 0.121636C9.48508 0.067925 9.38726 0.0304579 9.28516 0.0109863V5.4665Z"
fill="#111928"
/>
<path
opacity="0.16"
d="M14.8559 25.3269C14.7584 25.3073 14.6653 25.2698 14.5815 25.2163L9.57405 21.9449C9.53253 21.9175 9.48184 21.9077 9.43309 21.9176C9.38434 21.9275 9.34153 21.9564 9.31405 21.9978C9.29511 22.0263 9.28506 22.0598 9.28516 22.094V27.0155C9.285 27.0757 9.29989 27.1349 9.32848 27.1878C9.35707 27.2408 9.39845 27.2857 9.44886 27.3186L14.5815 30.6862C14.6659 30.7375 14.7589 30.7733 14.8559 30.792V25.3269Z"
fill="#111928"
/>
<path
opacity="0.16"
d="M9.57405 11.0315C9.53253 11.0042 9.48184 10.9943 9.43309 11.0043C9.38434 11.0142 9.34153 11.043 9.31405 11.0845C9.29511 11.113 9.28506 11.1465 9.28516 11.1807V16.1022C9.285 16.1623 9.29989 16.2216 9.32848 16.2745C9.35707 16.3274 9.39845 16.3724 9.44886 16.4053L14.5815 19.7729C14.6652 19.8257 14.7584 19.8616 14.8559 19.8787V14.4328C14.7575 14.4162 14.6638 14.3785 14.5815 14.3222L9.57405 11.0315Z"
fill="#111928"
/>
</g>
</g>
<defs>
<clipPath id="clip0_4151_62985">
<rect
width="26"
height="30.8097"
fill="white"
transform="translate(0 -0.000244141)"
/>
</clipPath>
</defs>
</svg>
<span class="w-full"
>Learn how to market your business on Themesberg.</span
>
<svg
class="ml-3 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
<a
href="#"
class="inline-flex justify-center items-center p-5 text-base font-medium text-gray-500 bg-gray-50 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
class="mr-3 w-5 h-5"
viewBox="0 0 33 21"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.5 0.224121C12.1 0.224121 9.34996 2.42416 8.25 6.82412C9.9 4.62408 11.825 3.79908 14.025 4.34912C15.2802 4.66288 16.1773 5.5736 17.1704 6.58152C18.7882 8.22366 20.6604 10.1241 24.75 10.1241C29.15 10.1241 31.9 7.92408 33 3.52412C31.35 5.72416 29.425 6.54916 27.225 5.99912C25.9698 5.68536 25.0727 4.77464 24.0796 3.76672C22.4618 2.12459 20.5896 0.224121 16.5 0.224121ZM8.25 10.1241C3.85004 10.1241 1.09996 12.3242 0 16.7241C1.65 14.5241 3.57496 13.6991 5.775 14.2491C7.03016 14.5629 7.92735 15.4736 8.92044 16.4815C10.5382 18.1237 12.4104 20.0241 16.5 20.0241C20.9 20.0241 23.65 17.8241 24.75 13.4241C23.1 15.6242 21.175 16.4492 18.975 15.8991C17.7198 15.5854 16.8227 14.6746 15.8296 13.6667C14.2118 12.0246 12.3396 10.1241 8.25 10.1241Z"
fill="url(#paint0_linear_4151_63014)"
/>
<defs>
<linearGradient
id="paint0_linear_4151_63014"
x1="-0.91663"
y1="6.56015"
x2="27.5845"
y2="22.9931"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#2298BD" />
<stop offset="1" stop-color="#0ED7B5" />
</linearGradient>
</defs>
</svg>
<span class="w-full"
>Start coding with the most popular utility-first framework</span
>
<svg
class="ml-3 w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Block end -->Financial trading CTA
Use this data-rich section with financial information for stock or crypto exchanges and encourage users to sign up for a trading account.
Financial trading CTA
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto text-center sm:py-16 lg:px-6">
<div class="max-w-screen-sm mx-auto">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Buy crypto at true cost
</h2>
<p
class="mb-6 lg:mb-16 font-light text-gray-500 md:text-lg dark:text-gray-400"
>
Buy and sell 250+ cryptocurrencies with 20+ fiat currencies using bank
transfers or your credit/debit card.
</p>
</div>
<!-- Table -->
<div class="relative mb-8 overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<tbody>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
>
Bitcoin <span class="text-gray-500 dark:text-gray-400">BTC</span>
</th>
<td
class="px-6 py-4 text-xl font-bold text-gray-900 dark:text-white"
>
$38,716.43
</td>
<td class="px-6 py-4 text-sm font-semibold text-red-500">
-10.82%
</td>
<td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
$729,729,745,340.82
</td>
<td class="px-6 py-4 text-right">
<a
href="#"
class="px-4 py-2 font-medium text-white rounded bg-primary-600 hover:bg-primary-700"
>Trade</a
>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
>
Ethereum <span class="text-gray-500 dark:text-gray-400">ETH</span>
</th>
<td
class="px-6 py-4 text-xl font-bold text-gray-900 dark:text-white"
>
$2,818.15
</td>
<td class="px-6 py-4 text-sm font-semibold text-red-500">
-13.88%
</td>
<td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
$333,396,739,452.23
</td>
<td class="px-6 py-4 text-right">
<a
href="#"
class="px-4 py-2 font-medium text-white rounded bg-primary-600 hover:bg-primary-700"
>Trade</a
>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
>
Cardano <span class="text-gray-500 dark:text-gray-400">ADA</span>
</th>
<td
class="px-6 py-4 text-xl font-bold text-gray-900 dark:text-white"
>
$1.22
</td>
<td class="px-6 py-4 text-sm font-semibold text-green-500">
+3.76%
</td>
<td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
$40,465,663,783.16
</td>
<td class="px-6 py-4 text-right">
<a
href="#"
class="px-4 py-2 font-medium text-white rounded bg-primary-600 hover:bg-primary-700"
>Trade</a
>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
>
Dogecoin
<span class="text-gray-500 dark:text-gray-400">DOGE</span>
</th>
<td
class="px-6 py-4 text-xl font-bold text-gray-900 dark:text-white"
>
$0.153765
</td>
<td class="px-6 py-4 text-sm font-semibold text-green-500">
+8.39%
</td>
<td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
$729,729,745,340.82
</td>
<td class="px-6 py-4 text-right">
<a
href="#"
class="px-4 py-2 font-medium text-white rounded bg-primary-600 hover:bg-primary-700"
>Trade</a
>
</td>
</tr>
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<th
scope="row"
class="px-6 py-4 text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
>
Polkadot <span class="text-gray-500 dark:text-gray-400">DOT</span>
</th>
<td
class="px-6 py-4 text-xl font-bold text-gray-900 dark:text-white"
>
$22.24
</td>
<td class="px-6 py-4 text-sm font-semibold text-red-500">
-13.17%
</td>
<td class="px-6 py-4 font-semibold text-gray-900 dark:text-white">
$21,710,483,995.43
</td>
<td class="px-6 py-4 text-right">
<a
href="#"
class="px-4 py-2 font-medium text-white rounded bg-primary-600 hover:bg-primary-700"
>Trade</a
>
</td>
</tr>
</tbody>
</table>
</div>
<p class="mb-5 sm:text-xl text-center text-gray-500 dark:text-gray-400">
Sign up now to build your own portfolio for free!
</p>
<a
href="#"
class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800"
>Sign Up Now</a
>
</div>
</section>
<!-- Block end -->Email sign-up CTA
Use this example to let users sign up for your newsletter or application by providing their email using the sign-up form and privacy notice.
Email sign-up CTA
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Get started with Flowbite today
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Connecting with your audience has never been easier with Flowbite
straightforward email marketing and automation tools.
</p>
<form action="#" class="mx-auto max-w-screen-sm">
<div class="flex items-center mb-3">
<div class="relative mr-3 w-full">
<label
for="member_email"
class="hidden mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Email address</label
>
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
class="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"
></path>
<path
d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"
></path>
</svg>
</div>
<input
class="block p-3 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Enter your email"
type="email"
name="member[email]"
id="member_email"
required=""
/>
</div>
<div>
<input
type="submit"
value="Subscribe"
class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg cursor-pointer bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
name="member_submit"
id="member_submit"
/>
</div>
</div>
<div
class="text-sm font-medium text-left text-gray-500 dark:text-gray-300"
>
Instant signup. No credit card required.
<a
href="#"
class="text-primary-600 hover:underline dark:text-primary-500"
>Terms of Service</a
>
and
<a
class="text-primary-600 hover:underline dark:text-primary-500"
href="#"
>Privacy Policy</a
>.
</div>
</form>
</div>
</div>
</section>
<!-- Block end -->Mobile app download
Use this section to encourage users to download your mobile application by providing two CTA buttons for App Store and Google Play.
Mobile app download
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div
class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6"
>
<div>
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Let's create more tools and ideas that brings us together.
</h2>
<p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
Flowbite helps you connect with friends and communities of people who
share your interests. Connecting with your friends and family as well as
discovering new ones is easy with features like Groups.
</p>
<div class="items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
<a
href="#"
class="w-full sm:w-auto bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800"
>
<svg
class="mr-3 w-7 h-7"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="apple"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
>
<path
fill="currentColor"
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"
></path>
</svg>
<div class="text-left">
<div class="mb-1 text-xs">Download on the</div>
<div class="-mt-1 font-sans text-sm font-semibold">
Mac App Store
</div>
</div>
</a>
<a
href="#"
class="w-full sm:w-auto bg-gray-800 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 text-white rounded-lg inline-flex items-center justify-center px-4 py-2.5 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-800"
>
<svg
class="mr-3 w-7 h-7"
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="google-play"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="currentColor"
d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l280.8-161.2-60.1-60.1L104.6 499z"
></path>
</svg>
<div class="text-left">
<div class="mb-1 text-xs">Get in on</div>
<div class="-mt-1 font-sans text-sm font-semibold">Google Play</div>
</div>
</a>
</div>
</div>
<img
class="hidden mx-auto w-64 md:flex"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/iphone-mockup.png"
alt="mobile app"
/>
</div>
</section>
<!-- Block end -->CTA with two cards and images
This example can be used to show a couple of cards with an image, description, progress bar, and CTA button for detailed information.
CTA with two cards and images
html
CTA section with tabs and mobile app
Use this component to show a CTA section with tabs and a preview of the mobile application inside a phone mockup frame.
CTA section with tabs and mobile app
html