You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
264 lines
12 KiB
HTML
264 lines
12 KiB
HTML
<div class="px-4 sm:px-6 lg:px-8">
|
|
<div class="sm:flex sm:items-center">
|
|
<div class="sm:flex-auto">
|
|
<h1 class="text-base font-semibold text-gray-900">Plans</h1>
|
|
<p class="mt-2 text-sm text-gray-700">
|
|
Your team is on the
|
|
<strong class="font-semibold text-gray-900">Startup</strong>
|
|
plan. The next payment of $80 will be due on August 4, 2022.
|
|
</p>
|
|
</div>
|
|
<div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
|
|
<button
|
|
type="button"
|
|
class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
>
|
|
Update credit card
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="-mx-4 mt-10 ring-1 ring-gray-300 sm:mx-0 sm:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
scope="col"
|
|
class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-gray-900 sm:pl-6"
|
|
>
|
|
Plan
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
|
|
>
|
|
Memory
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
|
|
>
|
|
CPU
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
|
|
>
|
|
Storage
|
|
</th>
|
|
<th
|
|
scope="col"
|
|
class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
|
|
>
|
|
Price
|
|
</th>
|
|
<th scope="col" class="relative py-3.5 pr-4 pl-3 sm:pr-6">
|
|
<span class="sr-only">Select</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="relative py-4 pr-3 pl-4 text-sm sm:pl-6">
|
|
<div class="font-medium text-gray-900">Hobby</div>
|
|
<div
|
|
class="mt-1 flex flex-col text-gray-500 sm:block lg:hidden"
|
|
>
|
|
<span>4 GB RAM / 4 CPUs</span>
|
|
<span class="hidden sm:inline">·</span>
|
|
<span>128 GB SSD disk</span>
|
|
</div>
|
|
</td>
|
|
<td
|
|
class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
4 GB RAM
|
|
</td>
|
|
<td
|
|
class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
4 CPUs
|
|
</td>
|
|
<td
|
|
class="hidden px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
128 GB SSD disk
|
|
</td>
|
|
<td class="px-3 py-3.5 text-sm text-gray-500">
|
|
<div class="sm:hidden">$40/mo</div>
|
|
<div class="hidden sm:block">$40/month</div>
|
|
</td>
|
|
<td
|
|
class="relative py-3.5 pr-4 pl-3 text-right text-sm font-medium sm:pr-6"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
|
|
>
|
|
Select<span class="sr-only">, Hobby</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="relative border-t border-transparent py-4 pr-3 pl-4 text-sm sm:pl-6"
|
|
>
|
|
<div class="font-medium text-gray-900">
|
|
Startup
|
|
<span class="ml-1 text-indigo-600"
|
|
>(Current Plan)</span
|
|
>
|
|
</div>
|
|
<div
|
|
class="mt-1 flex flex-col text-gray-500 sm:block lg:hidden"
|
|
>
|
|
<span>8 GB RAM / 6 CPUs</span>
|
|
<span class="hidden sm:inline">·</span>
|
|
<span>256 GB SSD disk</span>
|
|
</div>
|
|
<div
|
|
class="absolute -top-px right-0 left-6 h-px bg-gray-200"
|
|
></div>
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
8 GB RAM
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
6 CPUs
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
256 GB SSD disk
|
|
</td>
|
|
<td
|
|
class="border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500"
|
|
>
|
|
<div class="sm:hidden">$80/mo</div>
|
|
<div class="hidden sm:block">$80/month</div>
|
|
</td>
|
|
<td
|
|
class="relative border-t border-transparent py-3.5 pr-4 pl-3 text-right text-sm font-medium sm:pr-6"
|
|
>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
|
|
>
|
|
Select<span class="sr-only">, Startup</span>
|
|
</button>
|
|
<div
|
|
class="absolute -top-px right-6 left-0 h-px bg-gray-200"
|
|
></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="relative border-t border-transparent py-4 pr-3 pl-4 text-sm sm:pl-6"
|
|
>
|
|
<div class="font-medium text-gray-900">Business</div>
|
|
<div
|
|
class="mt-1 flex flex-col text-gray-500 sm:block lg:hidden"
|
|
>
|
|
<span>16 GB RAM / 8 CPUs</span>
|
|
<span class="hidden sm:inline">·</span>
|
|
<span>512 GB SSD disk</span>
|
|
</div>
|
|
<div
|
|
class="absolute -top-px right-0 left-6 h-px bg-gray-200"
|
|
></div>
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
16 GB RAM
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
8 CPUs
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
512 GB SSD disk
|
|
</td>
|
|
<td
|
|
class="border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500"
|
|
>
|
|
<div class="sm:hidden">$160/mo</div>
|
|
<div class="hidden sm:block">$160/month</div>
|
|
</td>
|
|
<td
|
|
class="relative border-t border-transparent py-3.5 pr-4 pl-3 text-right text-sm font-medium sm:pr-6"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
|
|
>
|
|
Select<span class="sr-only">, Business</span>
|
|
</button>
|
|
<div
|
|
class="absolute -top-px right-6 left-0 h-px bg-gray-200"
|
|
></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td
|
|
class="relative border-t border-transparent py-4 pr-3 pl-4 text-sm sm:pl-6"
|
|
>
|
|
<div class="font-medium text-gray-900">Enterprise</div>
|
|
<div
|
|
class="mt-1 flex flex-col text-gray-500 sm:block lg:hidden"
|
|
>
|
|
<span>1024 GB RAM / 12 CPUs</span>
|
|
<span class="hidden sm:inline">·</span>
|
|
<span>128 GB SSD disk</span>
|
|
</div>
|
|
<div
|
|
class="absolute -top-px right-0 left-6 h-px bg-gray-200"
|
|
></div>
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
1024 GB RAM
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
12 CPUs
|
|
</td>
|
|
<td
|
|
class="hidden border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500 lg:table-cell"
|
|
>
|
|
128 GB SSD disk
|
|
</td>
|
|
<td
|
|
class="border-t border-gray-200 px-3 py-3.5 text-sm text-gray-500"
|
|
>
|
|
<div class="sm:hidden">$240/mo</div>
|
|
<div class="hidden sm:block">$240/month</div>
|
|
</td>
|
|
<td
|
|
class="relative border-t border-transparent py-3.5 pr-4 pl-3 text-right text-sm font-medium sm:pr-6"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-gray-300 ring-inset hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-white"
|
|
>
|
|
Select<span class="sr-only">, Enterprise</span>
|
|
</button>
|
|
<div
|
|
class="absolute -top-px right-6 left-0 h-px bg-gray-200"
|
|
></div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|