CTA section with tabs and mobile app

Ios
Android

Flowbite in iOS: Take control of your finances with us

Our app helps users easily track their expenses and create a budget. With a user-friendly interface, the app allows users to quickly input their income and expenses, and then automatically categorizes them for easy tracking.

Continuous integration and deployment
Development workflow
Knowledge management

Flow Budget takes the hassle out of budgeting and empowers users to take control of their finances

Check out the iOS app features

Flowbite in Android: Take control of your finances with us

Seamless integration with Android Studio
Deployments with a click of a button
Lightning fast performance

Flowbite takes the hassle out of budgeting and empowers users to take control of their finances.

Check out the Android app features

We invest in the world’s potential

Flowbite Budget is a mobile app that helps users easily track their expenses and create a budget.

With a user-friendly interface, the app allows users to quickly input their income and expenses, and then automatically categorizes them for easy tracking.

Dynamic reports and dashboards
Templates for everyone
Development workflow
Limitless business automation
Knowledge management

Start building

Get a demo

<?php
/**
 * Title: CTA section with tabs and mobile app
 * Slug: cta-section-with-tabs-and-mobile-app
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"CTA section with tabs and mobile app"},"align":"full","className":"cta-section-with-tabs-and-mobile-app js-tabs-init","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull cta-section-with-tabs-and-mobile-app js-tabs-init"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__container","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__container"><!-- wp:columns {"className":"cta-section-with-tabs-and-mobile-app__main-row"} -->
<div class="wp-block-columns cta-section-with-tabs-and-mobile-app__main-row"><!-- wp:column {"className":"cta-section-with-tabs-and-mobile-app__content-column"} -->
<div class="wp-block-column cta-section-with-tabs-and-mobile-app__content-column"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__tabs","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__tabs"><!-- wp:list {"className":"cta-section-with-tabs-and-mobile-app__tab-list"} -->
<ul class="wp-block-list cta-section-with-tabs-and-mobile-app__tab-list"><!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__tab-item cta-section-with-tabs-and-mobile-app__tab-item\u002d\u002dios active"} -->
<li class="cta-section-with-tabs-and-mobile-app__tab-item cta-section-with-tabs-and-mobile-app__tab-item--ios active">Ios</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__tab-item cta-section-with-tabs-and-mobile-app__tab-item\u002d\u002dandroid"} -->
<li class="cta-section-with-tabs-and-mobile-app__tab-item cta-section-with-tabs-and-mobile-app__tab-item--android">Android</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__tab-content active","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__tab-content active"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__tab-panel cta-section-with-tabs-and-mobile-app__tab-panel\u002d\u002dios","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__tab-panel cta-section-with-tabs-and-mobile-app__tab-panel--ios"><!-- wp:heading {"className":"cta-section-with-tabs-and-mobile-app__heading"} -->
<h2 class="wp-block-heading cta-section-with-tabs-and-mobile-app__heading">Flowbite in iOS: Take control of your finances with us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"cta-section-with-tabs-and-mobile-app__description"} -->
<p class="cta-section-with-tabs-and-mobile-app__description">Our app helps users easily track their expenses and create a budget. With a user-friendly interface, the app allows users to quickly input their income and expenses, and then automatically categorizes them for easy tracking.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__features","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__features"><!-- wp:list {"className":"cta-section-with-tabs-and-mobile-app__feature-list"} -->
<ul class="wp-block-list cta-section-with-tabs-and-mobile-app__feature-list"><!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__feature-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__feature-item">Continuous integration and deployment</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__feature-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__feature-item">Development workflow</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__feature-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__feature-item">Knowledge management</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"className":"cta-section-with-tabs-and-mobile-app__tagline"} -->
<p class="cta-section-with-tabs-and-mobile-app__tagline">Flow Budget takes the hassle out of budgeting and empowers users to take control of their finances</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"cta-section-with-tabs-and-mobile-app__button-wrap","layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons cta-section-with-tabs-and-mobile-app__button-wrap"><!-- wp:button {"className":"is-style-outline cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button\u002d\u002doutline","icon":"chevron-right"} -->
<div class="wp-block-button is-style-outline cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button--outline"><a class="wp-block-button__link wp-element-button">Check out the iOS app features</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__tab-content","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__tab-content"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__tab-panel cta-section-with-tabs-and-mobile-app__tab-panel\u002d\u002dandroid","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__tab-panel cta-section-with-tabs-and-mobile-app__tab-panel--android"><!-- wp:heading {"className":"cta-section-with-tabs-and-mobile-app__heading"} -->
<h2 class="wp-block-heading cta-section-with-tabs-and-mobile-app__heading">Flowbite in Android: Take control of your finances with us</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"cta-section-with-tabs-and-mobile-app__description"} -->
<p class="cta-section-with-tabs-and-mobile-app__description">Our app helps users easily track their expenses and create a budget. With a user-friendly interface, the app allows users to quickly input their income and expenses, and then automatically categorizes them for easy tracking.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__features","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__features"><!-- wp:list {"className":"cta-section-with-tabs-and-mobile-app__feature-list"} -->
<ul class="wp-block-list cta-section-with-tabs-and-mobile-app__feature-list"><!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__feature-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__feature-item">Seamless integration with Android Studio</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__feature-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__feature-item">Deployments with a click of a button</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__feature-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__feature-item">Lightning fast performance</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"className":"cta-section-with-tabs-and-mobile-app__tagline"} -->
<p class="cta-section-with-tabs-and-mobile-app__tagline">Flowbite takes the hassle out of budgeting and empowers users to take control of their finances.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"wp-block-buttons cta-section-with-tabs-and-mobile-app__button-wrap"} -->
<div class="wp-block-buttons cta-section-with-tabs-and-mobile-app__button-wrap"><!-- wp:button {"className":"is-style-outline cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button\u002d\u002doutline","icon":"arrow-right"} -->
<div class="wp-block-button is-style-outline cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button--outline"><a class="wp-block-button__link wp-element-button">Check out the Android app features</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"cta-section-with-tabs-and-mobile-app__image-column"} -->
<div class="wp-block-column cta-section-with-tabs-and-mobile-app__image-column"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__mockup-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__mockup-wrapper"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__phone-notch","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__phone-notch"></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button\u002d\u002dtop","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button--top"></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button\u002d\u002dmiddle","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button--middle"></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button\u002d\u002dbottom","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button--bottom"></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button\u002d\u002dright","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__phone-button cta-section-with-tabs-and-mobile-app__phone-button--right"></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__phone-screen","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__phone-screen"><!-- wp:image {"sizeSlug":"large","className":"size-large cta-section-with-tabs-and-mobile-app__phone-image cta-section-with-tabs-and-mobile-app__phone-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large cta-section-with-tabs-and-mobile-app__phone-image cta-section-with-tabs-and-mobile-app__phone-image--light"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"scale":"cover","sizeSlug":"large","className":"size-large is-resized cta-section-with-tabs-and-mobile-app__phone-image cta-section-with-tabs-and-mobile-app__phone-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large is-resized cta-section-with-tabs-and-mobile-app__phone-image cta-section-with-tabs-and-mobile-app__phone-image--dark"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png" alt="" style="object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"cta-section-with-tabs-and-mobile-app__features-row"} -->
<div class="wp-block-columns cta-section-with-tabs-and-mobile-app__features-row"><!-- wp:column {"className":"cta-section-with-tabs-and-mobile-app__features-image-column"} -->
<div class="wp-block-column cta-section-with-tabs-and-mobile-app__features-image-column"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__features-image-wrap","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__features-image-wrap"><!-- wp:image {"sizeSlug":"large","className":" size-large cta-section-with-tabs-and-mobile-app__features-image cta-section-with-tabs-and-mobile-app__features-image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large  cta-section-with-tabs-and-mobile-app__features-image cta-section-with-tabs-and-mobile-app__features-image--light"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-tabs-1.png" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","className":"size-large cta-section-with-tabs-and-mobile-app__features-image cta-section-with-tabs-and-mobile-app__features-image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large cta-section-with-tabs-and-mobile-app__features-image cta-section-with-tabs-and-mobile-app__features-image--dark"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/cta/cta-tabs-2.png" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"cta-section-with-tabs-and-mobile-app__benefits-column"} -->
<div class="wp-block-column cta-section-with-tabs-and-mobile-app__benefits-column"><!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__benefits-header","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__benefits-header"><!-- wp:heading {"className":"cta-section-with-tabs-and-mobile-app__benefits-heading"} -->
<h2 class="wp-block-heading cta-section-with-tabs-and-mobile-app__benefits-heading">We invest in the world's potential</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"cta-section-with-tabs-and-mobile-app__benefits-text"} -->
<p class="cta-section-with-tabs-and-mobile-app__benefits-text"><strong>Flowbite Budget</strong> is a mobile app that helps users easily track their expenses and create a budget.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"cta-section-with-tabs-and-mobile-app__benefits-text"} -->
<p class="cta-section-with-tabs-and-mobile-app__benefits-text">With a user-friendly interface, the app allows users to quickly input their income and expenses, and then automatically categorizes them for easy tracking.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__benefits-features","layout":{"type":"constrained"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__benefits-features"><!-- wp:list {"className":"cta-section-with-tabs-and-mobile-app__benefits-list"} -->
<ul class="wp-block-list cta-section-with-tabs-and-mobile-app__benefits-list"><!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__benefits-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__benefits-item">Dynamic reports and dashboards</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__benefits-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__benefits-item">Templates for everyone</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__benefits-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__benefits-item">Development workflow</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__benefits-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__benefits-item">Limitless business automation</li>
<!-- /wp:list-item -->

<!-- wp:list-item {"className":"cta-section-with-tabs-and-mobile-app__benefits-item"} -->
<li class="cta-section-with-tabs-and-mobile-app__benefits-item">Knowledge management</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"cta-section-with-tabs-and-mobile-app__cta-buttons","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group cta-section-with-tabs-and-mobile-app__cta-buttons"><!-- wp:buttons {"className":"cta-section-with-tabs-and-mobile-app__buttons-wrap"} -->
<div class="wp-block-buttons cta-section-with-tabs-and-mobile-app__buttons-wrap"><!-- wp:button {"className":"cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button\u002d\u002dprimary","icon":"arrow-right"} -->
<div class="wp-block-button cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button--primary"><a class="wp-block-button__link wp-element-button">Start building</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button\u002d\u002dsecondary"} -->
<div class="wp-block-button cta-section-with-tabs-and-mobile-app__button cta-section-with-tabs-and-mobile-app__button--secondary"><a class="wp-block-button__link wp-element-button"> Get a demo</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.cta-section-with-tabs-and-mobile-app {
    @apply bg-white dark:bg-gray-900 antialiased;
  
    .cta-section-with-tabs-and-mobile-app__container {
      @apply max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24;
  
      .cta-section-with-tabs-and-mobile-app__main-row {
        @apply grid grid-cols-1 gap-8 lg:gap-16 md:grid-cols-2 mb-0;
  
        .cta-section-with-tabs-and-mobile-app__content-column {
          @apply space-y-8;
  
          .cta-section-with-tabs-and-mobile-app__tabs {
            @apply mb-8;
  
            .cta-section-with-tabs-and-mobile-app__tab-list {
              @apply flex flex-wrap gap-8 text-center;
  
              .cta-section-with-tabs-and-mobile-app__tab-item {
                @apply inline-flex flex-col items-center gap-2.5 cursor-pointer text-base font-medium text-gray-500 dark:text-gray-400;
              }             
              
              .cta-section-with-tabs-and-mobile-app__tab-item::before {
                @apply inline-flex items-center justify-center w-12 h-12 rounded-lg text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700;
                content: "";
                background-position: center;
                background-repeat: no-repeat; 
                background-size: 2rem 2rem;
              }
              
            .cta-section-with-tabs-and-mobile-app__tab-item--ios::before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z'%3E%3C/path%3E%3C/svg%3E");
            }
            
            @media (prefers-color-scheme: dark) {
                .cta-section-with-tabs-and-mobile-app__tab-item--ios::before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z'%3E%3C/path%3E%3C/svg%3E");
                }
            }
            
            .cta-section-with-tabs-and-mobile-app__tab-item--android::before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23374151'%3E%3Cpath d='M18.344 8.71c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53c0-.706-.572-1.278-1.279-1.278zm-12.688 0c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53A1.277 1.277 0 0 0 5.656 8.71zm8.889-3.809.768-1.388a.343.343 0 0 0-.133-.47.344.344 0 0 0-.471.135l-.789 1.42c-.588-.235-1.236-.368-1.92-.368s-1.332.132-1.92.367l-.789-1.418a.344.344 0 0 0-.471-.135.345.345 0 0 0-.133.47l.768 1.388C8.072 5.69 7.148 7.099 7.148 8.71c0 .011 0 .021.002.034-.002.006-.002.013-.002.019v.001h9.703V8.71c.001-1.611-.923-3.019-2.306-3.809zM9.76 6.869a.346.346 0 1 1 .005-.693.346.346 0 0 1-.005.693zm4.48 0a.347.347 0 0 1 0-.692.346.346 0 0 1 0 .692zM7.148 16.12c0 .646.525 1.171 1.174 1.171h.586v2.401a1.279 1.279 0 0 0 2.558 0v-2.401h1.066v2.401c0 .707.572 1.278 1.277 1.278.709 0 1.281-.571 1.281-1.278v-2.401h.586c.648 0 1.174-.524 1.174-1.171V9.028H7.148v7.092z'%3E%3C/path%3E%3C/svg%3E");
            }
            
            @media (prefers-color-scheme: dark) {
                .cta-section-with-tabs-and-mobile-app__tab-item--android::before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239CA3AF'%3E%3Cpath d='M18.344 8.71c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53c0-.706-.572-1.278-1.279-1.278zm-12.688 0c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53A1.277 1.277 0 0 0 5.656 8.71zm8.889-3.809.768-1.388a.343.343 0 0 0-.133-.47.344.344 0 0 0-.471.135l-.789 1.42c-.588-.235-1.236-.368-1.92-.368s-1.332.132-1.92.367l-.789-1.418a.344.344 0 0 0-.471-.135.345.345 0 0 0-.133.47l.768 1.388C8.072 5.69 7.148 7.099 7.148 8.71c0 .011 0 .021.002.034-.002.006-.002.013-.002.019v.001h9.703V8.71c.001-1.611-.923-3.019-2.306-3.809zM9.76 6.869a.346.346 0 1 1 .005-.693.346.346 0 0 1-.005.693zm4.48 0a.347.347 0 0 1 0-.692.346.346 0 0 1 0 .692zM7.148 16.12c0 .646.525 1.171 1.174 1.171h.586v2.401a1.279 1.279 0 0 0 2.558 0v-2.401h1.066v2.401c0 .707.572 1.278 1.277 1.278.709 0 1.281-.571 1.281-1.278v-2.401h.586c.648 0 1.174-.524 1.174-1.171V9.028H7.148v7.092z'%3E%3C/path%3E%3C/svg%3E");
                }
            }
            
            .cta-section-with-tabs-and-mobile-app__tab-item.active::before {
                @apply bg-gray-800 text-white dark:text-white;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19.665 16.811a10.316 10.316 0 0 1-1.021 1.837c-.537.767-.978 1.297-1.316 1.592-.525.482-1.089.73-1.692.744-.432 0-.954-.123-1.562-.373-.61-.249-1.17-.371-1.683-.371-.537 0-1.113.122-1.73.371-.616.25-1.114.381-1.495.393-.577.025-1.154-.229-1.729-.764-.367-.32-.826-.87-1.377-1.648-.59-.829-1.075-1.794-1.455-2.891-.407-1.187-.611-2.335-.611-3.447 0-1.273.275-2.372.826-3.292a4.857 4.857 0 0 1 1.73-1.751 4.65 4.65 0 0 1 2.34-.662c.46 0 1.063.142 1.81.422s1.227.422 1.436.422c.158 0 .689-.167 1.593-.498.853-.307 1.573-.434 2.163-.384 1.6.129 2.801.759 3.6 1.895-1.43.867-2.137 2.08-2.123 3.637.012 1.213.453 2.222 1.317 3.023a4.33 4.33 0 0 0 1.315.863c-.106.307-.218.6-.336.882zM15.998 2.38c0 .95-.348 1.838-1.039 2.659-.836.976-1.846 1.541-2.941 1.452a2.955 2.955 0 0 1-.021-.36c0-.913.396-1.889 1.103-2.688.352-.404.8-.741 1.343-1.009.542-.264 1.054-.41 1.536-.435.013.128.019.255.019.381z'%3E%3C/path%3E%3C/svg%3E");
            }
            
            .cta-section-with-tabs-and-mobile-app__tab-item--android.active::before {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M18.344 8.71c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53c0-.706-.572-1.278-1.279-1.278zm-12.688 0c-.707 0-1.279.572-1.279 1.278v4.53a1.278 1.278 0 1 0 2.558 0v-4.53A1.277 1.277 0 0 0 5.656 8.71zm8.889-3.809.768-1.388a.343.343 0 0 0-.133-.47.344.344 0 0 0-.471.135l-.789 1.42c-.588-.235-1.236-.368-1.92-.368s-1.332.132-1.92.367l-.789-1.418a.344.344 0 0 0-.471-.135.345.345 0 0 0-.133.47l.768 1.388C8.072 5.69 7.148 7.099 7.148 8.71c0 .011 0 .021.002.034-.002.006-.002.013-.002.019v.001h9.703V8.71c.001-1.611-.923-3.019-2.306-3.809zM9.76 6.869a.346.346 0 1 1 .005-.693.346.346 0 0 1-.005.693zm4.48 0a.347.347 0 0 1 0-.692.346.346 0 0 1 0 .692zM7.148 16.12c0 .646.525 1.171 1.174 1.171h.586v2.401a1.279 1.279 0 0 0 2.558 0v-2.401h1.066v2.401c0 .707.572 1.278 1.277 1.278.709 0 1.281-.571 1.281-1.278v-2.401h.586c.648 0 1.174-.524 1.174-1.171V9.028H7.148v7.092z'%3E%3C/path%3E%3C/svg%3E");
            }
            }
          }
  
          .cta-section-with-tabs-and-mobile-app__tab-content {
            @apply hidden;
  
            &.active {
              @apply block;
            }

            .cta-section-with-tabs-and-mobile-app__tab-panel {
              @apply space-y-4 sm:space-y-6 lg:space-y-8;
  
              .cta-section-with-tabs-and-mobile-app__heading {
                @apply text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white;
              }
  
              .cta-section-with-tabs-and-mobile-app__description {
                @apply mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl;
              }
            }
  
            .cta-section-with-tabs-and-mobile-app__features {
              @apply pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800 mt-4 sm:mt-6 lg:mt-8;        
  
              .cta-section-with-tabs-and-mobile-app__feature-list {
                @apply space-y-4;
  
                .cta-section-with-tabs-and-mobile-app__feature-item {
                  @apply flex items-center gap-2.5 text-base font-medium text-gray-900 dark:text-white;
                }

                .cta-section-with-tabs-and-mobile-app__feature-item::before {
                    @apply inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-600 shrink-0 dark:bg-primary-900 dark:text-primary-500;
                    content: "";
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-3.5 h-3.5'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 0.875rem 0.875rem;
                }
              }
  
              .cta-section-with-tabs-and-mobile-app__tagline {
                @apply mt-6 text-xl font-normal text-gray-500 dark:text-gray-400;
              }
  
              .cta-section-with-tabs-and-mobile-app__button-wrap {
                @apply mt-6;
  
                .cta-section-with-tabs-and-mobile-app__button a {
                    @apply inline-flex items-center text-base font-medium text-primary-600 hover:underline dark:text-primary-500 border-none pl-0;
                }
              }
            }
          }
        }
  
        .cta-section-with-tabs-and-mobile-app__image-column {
          @apply hidden md:block;
  
          .cta-section-with-tabs-and-mobile-app__mockup-wrapper {
            @apply relative mx-auto border-gray-800 dark:border-gray-800 dark:bg-gray-800 border-[14px] rounded-[2.5rem] h-[600px] w-[300px] shadow-xl;
  
            .cta-section-with-tabs-and-mobile-app__phone-notch {
              @apply absolute w-[148px] h-[18px] bg-gray-800 top-0 rounded-b-[1rem] left-1/2;
              transform: translateX(-50%);
            }
  
            .cta-section-with-tabs-and-mobile-app__phone-button {
              @apply bg-gray-800 absolute;
            }

            .cta-section-with-tabs-and-mobile-app__phone-button--top {
                @apply h-[32px] w-[3px] absolute top-[72px] rounded-l-lg;
                left: -17px;
            }
  
            .cta-section-with-tabs-and-mobile-app__phone-button--middle {
                @apply h-[46px] w-[3px] absolute top-[124px] rounded-l-lg;
                left: -17px;
            }

            .cta-section-with-tabs-and-mobile-app__phone-button--bottom {
                @apply h-[46px] w-[3px] absolute top-[178px] rounded-l-lg;
                left: -17px;
            }

            .cta-section-with-tabs-and-mobile-app__phone-button--right {
                @apply h-[64px] w-[3px] absolute top-[142px] rounded-r-lg;
                right: -17px;
            }
  
            .cta-section-with-tabs-and-mobile-app__phone-screen {
              @apply rounded-[2.5rem] overflow-hidden w-[272px] h-[572px] bg-white dark:bg-gray-800;
  
              .cta-section-with-tabs-and-mobile-app__phone-image {
                @apply w-[272px] h-[572px];
              }

              .cta-section-with-tabs-and-mobile-app__phone-image--light {
                @apply dark:hidden;
              }

              .cta-section-with-tabs-and-mobile-app__phone-image--dark {
                @apply hidden dark:block;
              }
            }
          }
        }
      }
  
      .cta-section-with-tabs-and-mobile-app__features-row {
        @apply grid grid-cols-1 gap-8 mt-8 mb-0 lg:mt-20 lg:gap-16 md:grid-cols-2;
  
        .cta-section-with-tabs-and-mobile-app__features-image-column {
          @apply hidden md:block;
  
          .cta-section-with-tabs-and-mobile-app__features-image-wrap {
            .cta-section-with-tabs-and-mobile-app__features-image {
              @apply object-cover w-full;
            }

            .cta-section-with-tabs-and-mobile-app__features-image--light {
                @apply dark:hidden;
            }

            .cta-section-with-tabs-and-mobile-app__features-image--dark {
                @apply hidden dark:block;
            }
          }
        }
  
        .cta-section-with-tabs-and-mobile-app__benefits-column {
          @apply space-y-4 sm:space-y-6 lg:space-y-8;
  
          .cta-section-with-tabs-and-mobile-app__benefits-header {
            .cta-section-with-tabs-and-mobile-app__benefits-heading {
              @apply text-3xl font-extrabold leading-tight text-gray-900 sm:text-4xl dark:text-white;
            }
  
            .cta-section-with-tabs-and-mobile-app__benefits-text {
              @apply mt-4 text-base font-normal text-gray-500 dark:text-gray-400 sm:text-xl;
            }
          }
  
          .cta-section-with-tabs-and-mobile-app__benefits-features {
            @apply pt-4 border-t border-gray-200 sm:pt-6 lg:pt-8 dark:border-gray-800;
  
            .cta-section-with-tabs-and-mobile-app__benefits-list {
              @apply space-y-4;
  
              .cta-section-with-tabs-and-mobile-app__benefits-item {
                @apply flex items-center gap-2.5 text-base font-medium text-gray-900 dark:text-white;
              }

              .cta-section-with-tabs-and-mobile-app__benefits-item::before {
                @apply inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary-100 text-primary-600 shrink-0 dark:bg-primary-900 dark:text-primary-500;
                content: "";
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' class='w-3.5 h-3.5'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
                background-position: center;
                background-repeat: no-repeat;
                background-size: 0.875rem 0.875rem;
              }
            }
          }
  
          .cta-section-with-tabs-and-mobile-app__cta-buttons {
            @apply flex items-center gap-4;
  
            .cta-section-with-tabs-and-mobile-app__buttons-wrap {
              .cta-section-with-tabs-and-mobile-app__button--primary a {
                @apply text-white bg-primary-700 justify-center hover:bg-primary-800 inline-flex items-center focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;                 
              }

              .cta-section-with-tabs-and-mobile-app__button--secondary a {
                @apply px-5 py-2.5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
              }
            }
          }
        }
      }
    }
}