Compare Flowbite to other platforms on the market
Here we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
<?php
/**
* Title: Comparison cards
* Slug: wlc/comparison-cards
* Block types: core/post-content
* Categories: featured
*/
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Comparison cards","categories":["featured"],"patternName":"wlc/comparison-cards"},"align":"full","className":"comparison-cards","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull comparison-cards"><!-- wp:group {"className":"comparison-cards__wrapper","layout":{"type":"default"}} -->
<div class="wp-block-group comparison-cards__wrapper"><!-- wp:columns {"className":"comparison-cards__columns"} -->
<div class="wp-block-columns comparison-cards__columns"><!-- wp:column {"className":"comparison-cards__column-content"} -->
<div class="wp-block-column comparison-cards__column-content"><!-- wp:heading {"className":"comparison-cards__content-heading"} -->
<h2 class="wp-block-heading comparison-cards__content-heading">Compare Flowbite to other platforms on the market</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"comparison-cards__content-description"} -->
<p class="comparison-cards__content-description">Here we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"className":"comparison-cards__content-buttons"} -->
<div class="wp-block-buttons comparison-cards__content-buttons"><!-- wp:button {"className":"comparison-cards__content-button","icon":"chevron-right"} -->
<div class="wp-block-button comparison-cards__content-button"><a class="wp-block-button__link wp-element-button">Learn what makes Flowbite different</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"className":"comparison-cards__column-links"} -->
<div class="wp-block-column comparison-cards__column-links"><!-- wp:buttons {"className":"comparison-cards__column-button","layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-buttons comparison-cards__column-button"><!-- wp:button {"width":100,"className":"comparison-cards__column-button is-style-outline comparison-cards__column-button\u002d\u002dprimary","icon":"arrow-right"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 comparison-cards__column-button is-style-outline comparison-cards__column-button--primary"><a class="wp-block-button__link wp-element-button"><div class="comparison-cards__button-box"><div class="comparison-cards__button-title">Simplicity and Affordability</div><div class="comparison-cards__button-subtitle">Flowbite vs Google</div></div></a></div>
<!-- /wp:button -->
<!-- wp:button {"width":100,"className":"comparison-cards__column-button is-style-outline comparison-cards__column-button\u002d\u002dsecondary","icon":"arrow-right"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 comparison-cards__column-button is-style-outline comparison-cards__column-button--secondary"><a class="wp-block-button__link wp-element-button"><div class="comparison-cards__button-box"><div class="comparison-cards__button-title">Built for customer support</div><div class="comparison-cards__button-subtitle">Microsoft vs Apple</div></div></a></div>
<!-- /wp:button -->
<!-- wp:button {"width":100,"className":"comparison-cards__column-button is-style-outline comparison-cards__column-button\u002d\u002dtertiary","icon":"arrow-right"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 comparison-cards__column-button is-style-outline comparison-cards__column-button--tertiary"><a class="wp-block-button__link wp-element-button"><div class="comparison-cards__button-box"><div class="comparison-cards__button-title">Modern and intuitive ui</div><div class="comparison-cards__button-subtitle">Zendesk vs Meet</div></div></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->
.comparison-cards {
@apply bg-white dark:bg-gray-900;
.comparison-cards__wrapper {
@apply py-8 px-4 mx-auto sm:py-16 lg:px-6;
}
.comparison-cards__columns {
@apply grid space-y-8 lg:grid-cols-2 gap-0 lg:gap-12 lg:space-y-0 mb-0;
}
.comparison-cards__content-heading {
@apply mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white;
}
.comparison-cards__content-description {
@apply mb-4 text-gray-500 sm:text-xl dark:text-gray-400;
}
.comparison-cards__content-buttons {
@apply inline-flex items-center;
.comparison-cards__content-button {
.wp-element-button {
@apply font-medium sm:text-lg text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-400 bg-transparent p-0;
}
}
}
.comparison-cards__column-button {
@apply flex justify-between gap-0;
.wp-element-button {
@apply items-center justify-between p-4 mb-6 bg-white rounded-lg border-l-8 shadow flex flex-wrap hover:bg-gray-50;
}
.comparison-cards__button-title {
@apply block mb-1 text-xs font-medium text-gray-500 uppercase dark:text-gray-400;
}
.comparison-cards__button-subtitle {
@apply text-xl font-semibold;
}
.wp-block-button__link-icon {
@apply w-6 h-6 flex justify-center items-center;
}
}
.comparison-cards__column-button--primary {
.wp-element-button {
@apply dark:bg-gray-800 dark:hover:bg-gray-700 border-primary-600 dark:border-primary-500 ;
}
.comparison-cards__button-subtitle {
@apply text-primary-600 dark:text-primary-500;
}
.wp-block-button__link-icon {
@apply text-primary-600 dark:text-primary-500;
}
}
.comparison-cards__column-button--secondary {
.wp-element-button {
@apply border-purple-600 shadow dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-purple-500;
}
.comparison-cards__button-subtitle {
@apply text-purple-600 dark:text-purple-500;
}
.wp-block-button__link-icon {
@apply text-purple-600 dark:text-purple-500;
}
}
.comparison-cards__column-button--tertiary {
.wp-element-button {
@apply border-teal-600 shadow dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-teal-500;
}
.comparison-cards__button-subtitle {
@apply text-teal-600 dark:text-teal-500;
}
.wp-block-button__link-icon {
@apply text-teal-600 dark:text-teal-500;
}
}
}