A hackable text editor for the 21st Century

Here at flowbite we focus on markets where technology, innovation, and capital can unlock long-term value.

1.60.0

Release notes

macOS

For macOS 10.10 or later

Windows

For windows 7 or later

Download

By using Flowbite, you agree to its lic e nse and privacy statement.

<?php
/**
 * Title: Informational CTA with app screenshot
 * Slug: informational-cta-with-app-screenshot
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"article","metadata":{"name":"Informational CTA with app screenshot","categories":["featured"],"patternName":"wlc/informational-cta-with-app-screenshot"},"align":"full","className":"informational-cta-with-app-screenshot","layout":{"type":"constrained"}} -->
<article class="wp-block-group alignfull informational-cta-with-app-screenshot"><!-- wp:columns {"align":"full","className":"informational-cta-with-app-screenshot__columns"} -->
<div class="wp-block-columns alignfull informational-cta-with-app-screenshot__columns"><!-- wp:column {"className":"informational-cta-with-app-screenshot__content-column","layout":{"type":"constrained"}} -->
<div class="wp-block-column informational-cta-with-app-screenshot__content-column"><!-- wp:heading {"level":1,"className":"informational-cta-with-app-screenshot__heading"} -->
<h1 class="wp-block-heading informational-cta-with-app-screenshot__heading">A hackable <span>text editor</span> for the 21st Century</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"informational-cta-with-app-screenshot__description"} -->
<p class="informational-cta-with-app-screenshot__description">Here at flowbite we focus on markets where technology, innovation, and capital can unlock long-term value.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"informational-cta-with-app-screenshot__info-container","layout":{"type":"constrained"}} -->
<div class="wp-block-group informational-cta-with-app-screenshot__info-container"><!-- wp:group {"className":"informational-cta-with-app-screenshot__info-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group informational-cta-with-app-screenshot__info-box"><!-- wp:paragraph -->
<p><strong>1.60.0</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Release notes</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"informational-cta-with-app-screenshot__info-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group informational-cta-with-app-screenshot__info-box"><!-- wp:paragraph -->
<p><strong>macOS</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For macOS 10.10 or later</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"informational-cta-with-app-screenshot__info-box","layout":{"type":"constrained"}} -->
<div class="wp-block-group informational-cta-with-app-screenshot__info-box"><!-- wp:paragraph -->
<p><strong>Windows</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For windows 7 or later</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:buttons {"align":"full","className":"informational-cta-with-app-screenshot__info-buttons","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons alignfull informational-cta-with-app-screenshot__info-buttons"><!-- wp:button {"textAlign":"center","className":"informational-cta-with-app-screenshot__info-button"} -->
<div class="wp-block-button informational-cta-with-app-screenshot__info-button"><a class="wp-block-button__link has-text-align-center wp-element-button"><img src="data:image/svg+xml, %3Csvg class='w-5 h-5 mr-2 -ml-1' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'%3E%3C/path%3E%3C/svg%3E" alt="">Download</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"informational-cta-with-app-screenshot__terms","layout":{"type":"constrained"}} -->
<div class="wp-block-group informational-cta-with-app-screenshot__terms"><!-- wp:paragraph -->
<p>By using Flowbite, you agree to its <a href="https://flowbite.com/blocks/marketing/hero/#">lic</a><a href="#">e</a><a href="https://flowbite.com/blocks/marketing/hero/#">nse</a> and <a href="#">privacy statement</a>.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"informational-cta-with-app-screenshot__image-column","layout":{"type":"constrained"}} -->
<div class="wp-block-column informational-cta-with-app-screenshot__image-column"><!-- wp:image {"sizeSlug":"large","className":"informational-cta-with-app-screenshot__image informational-cta-with-app-screenshot__image\u002d\u002dlight"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot__image informational-cta-with-app-screenshot__image--light"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/text-editor-light.svg" alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image {"sizeSlug":"large","className":"informational-cta-with-app-screenshot__image informational-cta-with-app-screenshot__image\u002d\u002ddark"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot__image informational-cta-with-app-screenshot__image--dark"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/text-editor-dark.svg" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"align":"full","className":"informational-cta-with-app-screenshot____brands","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull informational-cta-with-app-screenshot____brands"><!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"informational-cta-with-app-screenshot____brand"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot____brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"informational-cta-with-app-screenshot____brand"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot____brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"informational-cta-with-app-screenshot____brand"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot____brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"informational-cta-with-app-screenshot____brand"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot____brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"informational-cta-with-app-screenshot____brand"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot____brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image -->

<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom","className":"informational-cta-with-app-screenshot____brand"} -->
<figure class="wp-block-image size-large informational-cta-with-app-screenshot____brand"><a href="#"><img src="https://fakeimg.pl/200x40/cccccc/787474?text=ICON&font_size=24" alt=""/></a></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></article>
<!-- /wp:group -->

.informational-cta-with-app-screenshot{
    @apply bg-white dark:bg-gray-900;

    .informational-cta-with-app-screenshot__columns {
        @apply grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 mb-0;
    }

    .informational-cta-with-app-screenshot__content-column {
        @apply mx-auto place-self-center lg:col-span-7;

        .informational-cta-with-app-screenshot__heading{
            @apply max-w-2xl mb-6 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl xl:text-6xl dark:text-white;
            span{
                @apply text-primary-600 dark:text-primary-500;
            }
        }

        .informational-cta-with-app-screenshot__description {
            @apply max-w-2xl mb-6 font-light text-gray-500 lg:mb-10 md:text-lg lg:text-xl dark:text-gray-400;
        }

        .informational-cta-with-app-screenshot__info-container{
            @apply items-center justify-between p-4 mb-4 space-y-4 bg-gray-100 rounded dark:bg-gray-700 sm:flex sm:space-y-0;
        }

        .informational-cta-with-app-screenshot__info-box p:first-child {
            @apply text-2xl font-bold text-gray-900 dark:text-white mb-0;
        }
        
        .informational-cta-with-app-screenshot__info-box p:last-child {
           @apply text-sm text-gray-500 dark:text-gray-400  mb-0;
        }

        .informational-cta-with-app-screenshot__info-buttons {
        
            .informational-cta-with-app-screenshot__info-button {
                @apply w-full sm:w-auto;
            }

            .wp-block-button__link {
                @apply inline-flex items-center justify-center w-full px-5 py-3 text-base font-medium text-center text-white rounded-lg sm:w-auto bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 whitespace-nowrap;
            }

            .wp-block-button__link img {
                @apply w-5 h-5 mr-2 -ml-1;
                filter: brightness(0) invert(1);
            }
        }
        
        .informational-cta-with-app-screenshot__terms {
            @apply text-sm text-gray-500;
        }

        .informational-cta-with-app-screenshot__terms a {
            @apply text-primary-600 dark:text-primary-500 hover:underline;
        }
    
    }

    .informational-cta-with-app-screenshot__image-column {
        @apply hidden lg:mt-0 lg:col-span-5 lg:flex;

        .informational-cta-with-app-screenshot__image img {
            @apply rounded-lg shadow-lg;
        } 
        
        .informational-cta-with-app-screenshot__image--light{
            @apply dark:hidden;
        }

        .informational-cta-with-app-screenshot__image--dark{
            @apply hidden dark:block;
        }
    }

    .informational-cta-with-app-screenshot____brands {
        @apply grid max-w-screen-xl grid-cols-2 gap-8 px-4 pb-8 mx-auto text-gray-500 lg:pb-16 sm:gap-12 md:grid-cols-3 lg:grid-cols-6 dark:text-gray-400;

        .informational-cta-with-app-screenshot____brand {
            @apply flex justify-center;
        }

        .informational-cta-with-app-screenshot____brand a {
            @apply flex justify-center;
        }

        .informational-cta-with-app-screenshot____brand img {
            @apply h-8 hover:text-gray-900 dark:hover:text-white opacity-75 hover:opacity-100 transition-opacity;
        }
    }
}