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.
105 lines
5.1 KiB
HTML
105 lines
5.1 KiB
HTML
<fieldset aria-label="Choose a memory option">
|
|
<div class="flex items-center justify-between">
|
|
<div class="text-sm/6 font-medium text-gray-900">RAM</div>
|
|
<a
|
|
href="#"
|
|
class="text-sm/6 font-medium text-indigo-600 hover:text-indigo-500"
|
|
>See performance specs</a
|
|
>
|
|
</div>
|
|
<div class="mt-2 grid grid-cols-3 gap-3 sm:grid-cols-6">
|
|
<label
|
|
aria-label="4 GB"
|
|
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-3 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="option"
|
|
value="4gb"
|
|
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium uppercase group-has-checked:text-white"
|
|
>4 GB</span
|
|
>
|
|
</label>
|
|
<label
|
|
aria-label="8 GB"
|
|
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-3 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="option"
|
|
value="8gb"
|
|
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium uppercase group-has-checked:text-white"
|
|
>8 GB</span
|
|
>
|
|
</label>
|
|
<label
|
|
aria-label="16 GB"
|
|
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-3 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="option"
|
|
value="16gb"
|
|
checked
|
|
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium uppercase group-has-checked:text-white"
|
|
>16 GB</span
|
|
>
|
|
</label>
|
|
<label
|
|
aria-label="32 GB"
|
|
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-3 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="option"
|
|
value="32gb"
|
|
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium uppercase group-has-checked:text-white"
|
|
>32 GB</span
|
|
>
|
|
</label>
|
|
<label
|
|
aria-label="64 GB"
|
|
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-3 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="option"
|
|
value="64gb"
|
|
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium uppercase group-has-checked:text-white"
|
|
>64 GB</span
|
|
>
|
|
</label>
|
|
<label
|
|
aria-label="128 GB"
|
|
class="group relative flex items-center justify-center rounded-md border border-gray-300 bg-white p-3 has-checked:border-indigo-600 has-checked:bg-indigo-600 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-indigo-600 has-disabled:border-gray-400 has-disabled:bg-gray-200 has-disabled:opacity-25"
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="option"
|
|
value="128gb"
|
|
disabled
|
|
class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium uppercase group-has-checked:text-white"
|
|
>128 GB</span
|
|
>
|
|
</label>
|
|
</div>
|
|
</fieldset>
|