PrimeFlex: https://www.primefaces.org/primeflex/minheight
A Pen by Mert Cukuren on CodePen.
<div class="flex lg:flex-row flex-column lg:justify-content-center align-items-center lg:p-8 p-4 font-sans text-white bg-bluegray-900 min-h-screen"> | |
<div class="lg:w-23rem w-full border-2 lg:border-right-none border-bluegray-800 p-5"> | |
<div class="pb-3 mb-4 border-bottom-1 border-bluegray-800"> | |
<div class="text-xs text-bluegray-400 mb-2">START</div> | |
<h2 class="text-5xl m-0 font-normal">Free</h2> | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Vexillologist pitchfork | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg> | |
Tumeric plaid portland | |
</div> | |
<div class="flex align-items-center mb-5"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Mixtape chillwave tumeric | |
</div> | |
<div class="mt-auto w-full"> | |
<button class="bg-bluegray-800 cursor-pointer text-white py-2 border-none w-full flex align-items-center px-3"> | |
Button | |
<svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path> | |
</svg> | |
</button> | |
<div class="text-xs mt-3 text-bluegray-600 line-height-2">Literally you probably haven't heard of them jean shorts.</div> | |
</div> | |
</div> | |
<div class="lg:w-23rem w-full lg:my-0 my-4 border-2 border-bluegray-800 p-5 lg:shadow-8"> | |
<div class="pb-3 mb-4 border-bottom-1 border-bluegray-800"> | |
<div class="text-xs text-bluegray-400 mb-2">PRO</div> | |
<div class="flex align-items-center"> | |
<h2 class="text-5xl m-0 font-normal">$38</h2> | |
<span class="text-bluegray-300 ml-1">/mo</span> | |
</div> | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Vexillologist pitchfork | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg> | |
Tumeric plaid portland | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Hexagon neutra unicorn | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Tumeric plaid portland | |
</div> | |
<div class="flex align-items-center mb-5"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Mixtape chillwave tumeric | |
</div> | |
<div class="mt-auto w-full"> | |
<button class="bg-teal-500 cursor-pointer text-white py-2 border-none w-full flex align-items-center px-3"> | |
Button | |
<svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path> | |
</svg> | |
</button> | |
<div class="text-xs mt-3 text-bluegray-600 line-height-2">Literally you probably haven't heard of them jean shorts.</div> | |
</div> | |
</div> | |
<div class="lg:w-23rem w-full border-2 lg:border-left-none border-bluegray-800 p-5"> | |
<div class="pb-3 mb-4 border-bottom-1 border-bluegray-800"> | |
<div class="text-xs text-bluegray-400 mb-2">ENTERPRISE</div> | |
<div class="flex align-items-center"> | |
<h2 class="text-5xl m-0 font-normal">$72</h2> | |
<span class="text-bluegray-300 ml-1">/mo</span> | |
</div> | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Vexillologist pitchfork | |
</div> | |
<div class="flex align-items-center mb-2"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg> | |
Tumeric plaid portland | |
</div> | |
<div class="flex align-items-center mb-5"> | |
<svg width="24" height="24" fill="none" class="text-green-500 mr-1" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 12.8665L8.33995 16.4138C9.15171 17.5256 10.8179 17.504 11.6006 16.3715L18.25 6.75"></path> | |
</svg>Mixtape chillwave tumeric | |
</div> | |
<div class="mt-auto w-full"> | |
<button class="bg-bluegray-800 cursor-pointer text-white py-2 border-none w-full flex align-items-center px-3"> | |
Button | |
<svg class="ml-auto" width="24" height="24" fill="none" viewBox="0 0 24 24"> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.75 6.75L19.25 12L13.75 17.25"></path> | |
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12H4.75"></path> | |
</svg> | |
</button> | |
<div class="text-xs mt-3 text-bluegray-600 line-height-2">Literally you probably haven't heard of them jean shorts.</div> | |
</div> | |
</div> | |
</div> |
PrimeFlex: https://www.primefaces.org/primeflex/minheight
A Pen by Mert Cukuren on CodePen.
* { | |
box-sizing: border-box; | |
} |