Sections-pricing
sections-pricing1
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="flex flex-wrap gap30 t-gray600 dark:t-gray100 transition-duration" style="--flex-basis: 200px">
<div class="flex-grow1 flex-basis-var w100-tablet bg-gray100 dark:bg-gray700 pad10 t-center hover-bg-gray300 dark:hover-bg-gray600 rounded20">
<div><i class="bi-rocket t500 t-primary600 bordered icon-circle icon0 bg-white"></i></div>
<div class="t150 mar10-t">Starter</div>
<div class="mar10-tb">19$/month</div>
<div class="mar30-t">1000 messages</div>
<div class="mar10-tb">10 database</div>
<div class="mar10-tb">5 users</div>
<div class="mar10-tb">1 sites</div>
<div class="mar20-tb"><a class="button bi-check bg-gray650 hover-bg-primary750" _href="">Order now</a></div>
</div>
<div class="flex-grow1 flex-basis-var w100-tablet bg-gray100 dark:bg-gray700 pad10 t-center hover-bg-gray300 dark:hover-bg-gray600 rounded20">
<div class=""><i class="bi-house t500 t-primary600 bordered icon-circle icon0 bg-white"></i></div>
<div class="t150 mar10-t">Business</div>
<div class="mar10-tb">39$/month</div>
<div class="mar30-t">5000 messages</div>
<div class="mar10-tb">50 database</div>
<div class="mar10-tb">20 users</div>
<div class="mar10-tb">10 sites</div>
<div class="mar20-tb"><a class="button bi-check bg-gray650 hover-bg-primary750" _href="">Order now</a></div>
</div>
<div class="flex-grow1 flex-basis-var w100-tablet t-center t-white bg-primary700 hover-bg-primary600 hover-t-white rounded20 animation-fade animation-slow">
<div class="t150 bg-primary400 t-white pad20-t pad50-b bor5 bor-solid-b bor-primary rounded20">Developer</div>
<div style="margin-top:-50px"><i class="bi-globe t300 t-primary600 icon-circle icon0 bg-white bordered bor-primary"></i></div>
<div class="mar30-t">59$/month</div>
<div class="mar10-t">100 000 messages</div>
<div class="mar10-tb">500 database</div>
<div class="mar10-tb">100 users</div>
<div class="mar10-tb">50 sites</div>
<div class="mar50-tb"><a class="button button-outline1 bi-check rounded10 pad20-rl" _href="">Order now</a></div>
</div>
<div class="flex-grow1 flex-basis-var w100-tablet bg-gray100 dark:bg-gray700 pad10 t-center hover-bg-gray300 dark:hover-bg-gray600 rounded20">
<div class=""><i class="bi-sun t500 t-primary600 bordered icon-circle icon0 bg-white"></i></div>
<div class="t150 mar10-t">Extended</div>
<div class="mar10-tb">299$/month</div>
<div class="mar30-t">∞ messages</div>
<div class="mar10-tb">∞ database</div>
<div class="mar10-tb">∞ users</div>
<div class="mar10-tb">∞ sites</div>
<div class="mar20-tb"><a class="button bi-check bg-gray650 hover-bg-primary750" _href="">Order now</a></div>
</div>
</div>
</div>
</div>
sections-pricing2
<div class="layout-center-wrap mar50-tb">
<div class="layout-wrap">
<div class="flex flex-wrap gap30 transition-duration" style="--flex-basis: 300px">
<div class="flex-grow1 flex-basis-var w100-tablet bor1 bor-solid bor-primary200 pad30 bg-white dark:bg-primary600 hover-bg-primary100 dark:hover-bg-primary500 dark:bor-custom" style="--bor-custom-dark: 4px solid var(--primary500);">
<div class="t120">Lorem ipsum dolor sit amet</div>
<div class="t300 t-primary600 dark:t-primary100"><b>250</b> <sup class="badge t100">UAH</sup></div>
<div class="t100 t-primary400 dark:t-primary200">Lorem ipsum dolor sit amet 25%</div>
<div class="mar10-tb t90">Lorem ipsum dolor sit amet</div>
<div class="mar20-tb"><a class="bi-check button rounded10 w100 t-center" _href="">Order Now</a></div>
<div class="t90 dark:t-primary100">Aenean <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Donec <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Morbi <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 t-gray400 dark:t-primary350">Nulla <span class="b-inline b-right">No</span></div>
<hr class="mar5-tb">
<div class="t90 t-gray400 dark:t-primary350">Suspendiss <span class="b-inline b-right">No</span></div>
<hr class="mar5-tb">
<div class="t90 t-gray400 dark:t-primary350">Sed <span class="b-inline b-right">No</span></div>
</div>
<div class="flex-grow1 flex-basis-var w100-tablet bor1 bor-solid bor-primary200 pad30 bg-primary100 dark:bg-primary700 hover-bg-primary200 dark:hover-bg-primary600 dark:bor-custom" style="--bor-custom-dark: 4px solid var(--primary500);">
<div class="t120">Lorem ipsum dolor sit amet</div>
<div class="t300 t-primary600 dark:t-primary100"><b>400</b> <sup class="badge t100">UAH</sup></div>
<div class="t100 t-primary400 dark:t-primary200 ">Lorem ipsum dolor sit amet 40%</div>
<div class="mar10-tb t90">Lorem ipsum dolor sit amet</div>
<div class="mar20-tb"><a class="bi-check button dark:hover-bg-primary700 dark:bg-primary800 rounded10 w100 t-center" _href="">Order Now</a></div>
<div class="t90 dark:t-primary100">Aenean <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Donec <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Morbi <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Nulla <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Suspendiss <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 t-gray400 dark:t-primary350">Sed <span class="b-inline b-right">No</span></div>
</div>
<div class="flex-grow1 flex-basis-var w100-tablet bor1 bor-solid bor-primary200 pad30 bg-white dark:bg-primary600 hover-bg-primary100 dark:hover-bg-primary500 dark:bor-custom" style="--bor-custom-dark: 4px solid var(--primary500);">
<div class="t120">Lorem ipsum dolor sit amet</div>
<div class="t300 t-primary600 dark:t-primary100"><b>600</b> <sup class="badge t100">UAH</sup></div>
<div class="t100 t-primary400 dark:t-primary200">Lorem ipsum dolor sit amet 60%</div>
<div class="mar10-tb t90">Lorem ipsum dolor sit amet</div>
<div class="mar20-tb"><a class="bi-check button rounded10 w100 t-center" _href="">Order Now</a></div>
<div class="t90 dark:t-primary100">Aenean <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Donec <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Morbi <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Nulla <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Suspendiss <span class="t-bold b-inline b-right">Yes</span></div>
<hr class="mar5-tb">
<div class="t90 dark:t-primary100">Sed <span class="t-bold b-inline b-right">Yes</span></div>
</div>
</div>
</div>
</div>