នេះគឺ simple កូដសម្រាប់ធ្វើ card responsive screen ជាមួយ pricing grid ដែលមានដូចខាងក្រោមនេះ
<body>
<!-- Pricing Grids -->
<!-- Global Container -->
<div class="flex justify-center bg-slate-800">
<!-- Inner Container -->
<div class="flex flex-col md:flex-row space-y-3 md:space-y-0 md:space-x-6 m-5">
<!-- Col-1 -->
<div class="bg-slate-700 rounded-lg text-white">
<!-- Upper Container -->
<div class="p-8 mx-3 bg-slate-800 mt-3 rounded-t-xl">
<div class="uppercase text-center">basic</div>
<h2 class="text-5xl mt-10 font-serif text-center">100GB</h2>
<h3 class="text-center ">$1.99/Month</h3>
<div class="flex justify-center">
<a href=""
class="inline-clock border border-violet-600 px-10 py-3 rounded-lg text-center duration-200
hover:bg-violet-800 hover:border-violet-800"
>Purchase</a>
</div>
</div>
<!-- border -->
<div class="border-t border-slate-700"></div>
<!-- Lower Container -->
<div class="flex mx-3 p-8 rounded-b-xl bg-slate-800 mb-3">
<!-- List Contents -->
<div class="flex flex-col space-y-2">
<!-- List item 1-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">100 GB of storage</span>
</div>
<!-- List item 2-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">Option to add members</span>
</div>
<!-- List item 3-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">Extra member benifits</span>
</div>
</div>
</div>
</div>
<!-- Col-2 -->
<div class="bg-violet-700 rounded-lg text-white">
<!-- Upper Container -->
<div class="p-8 mx-3 bg-slate-800 mt-3 rounded-t-xl">
<div class="uppercase text-center">Stardand</div>
<h2 class="text-5xl mt-10 font-serif text-center">200GB</h2>
<h3 class="text-center ">$3.99/Month</h3>
<div class="flex justify-center">
<a href=""
class="inline-clock border border-violet-600 px-10 py-3 rounded-lg text-center duration-200 bg-violet-700
hover:bg-violet-800 hover:border-violet-800"
>Purchase</a>
</div>
</div>
<!-- border -->
<div class="border-t border-slate-700"></div>
<!-- Lower Container -->
<div class="flex mx-3 p-8 rounded-b-xl bg-slate-800 mb-3">
<!-- List Contents -->
<div class="flex flex-col space-y-2">
<!-- List item 1-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">200 GB of storage</span>
</div>
<!-- List item 2-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">Option to add members</span>
</div>
<!-- List item 3-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">Extra member benifits</span>
</div>
</div>
</div>
</div>
<!-- Col-3 -->
<div class="bg-slate-700 rounded-lg text-white">
<!-- Upper Container -->
<div class="p-8 mx-3 bg-slate-800 mt-3 rounded-t-xl">
<div class="uppercase text-center">Premier</div>
<h2 class="text-5xl mt-10 font-serif text-center">2 TB</h2>
<h3 class="text-center ">$8.99/Month</h3>
<div class="flex justify-center">
<a href=""
class="inline-clock border border-violet-600 px-10 py-3 rounded-lg text-center duration-200
hover:bg-violet-800 hover:border-violet-800"
>Purchase</a>
</div>
</div>
<!-- border -->
<div class="border-t border-slate-700"></div>
<!-- Lower Container -->
<div class="flex mx-3 p-8 rounded-b-xl bg-slate-800 mb-3">
<!-- List Contents -->
<div class="flex flex-col space-y-2">
<!-- List item 1-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">200 GB of storage</span>
</div>
<!-- List item 2-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">Option to add members</span>
</div>
<!-- List item 3-->
<div class="flex text-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-5 h-5"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" />
</svg><span class="text-sm ml-1">Extra member benifits</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
0 Comments