Input "radio" size chart selector w/ Alpine.js & TailwindCSS

index.html

<!-- Tailwind CSS :: styles -->
<style type="text/tailwindcss">
@layer base {}
@layer components {}
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
}
</style>
<!-- Tailwind CSS :: config -->
<script>
tailwind.config = {
    theme: {
        extend: {
            colors: {
                dodgerblue: 'dodgerblue'
            },
            spacing: {
                '18': '4.5rem',
                'unset': 'unset'
            },
            screens: {
                'xxs': '21.25rem',
            },
            zIndex: {
                '1': '1'
            }
        }
    }
}
</script>

<div class="grid place-content-center h-dvh p-4">
    <form id="product-size" name="product-size" action="" method="">
        <fieldset class="space-y-2 border-0">
            <legend class="text-gray-700 text-lg/tight font-semibold">Choose size</legend>
            <div class="flex flex-wrap gap-2" x-data="{ selected:[],sizes:[{id:1,abbr:'xs',name:'extra small'},{id:2,abbr:'s',name:'small'},{id:3,abbr:'m',name:'medium'},{id:4,abbr:'l',name:'large'},{id:5,abbr:'xl',name:'extra large'},{id:6,abbr:'2xl',name:'double extra large'},]}">
                <template x-for="size in sizes" :key="size.id">
                <div class="grid w-max min-w-18 mx-auto xxs:mx-unset | *:[grid-area:1/1]">
                    <input type="radio" :id="`size-${size.abbr}`" :value="size.id" x-model.number="selected" class="peer | z-1 appearance-none cursor-pointer outline-none size-full border-0 rounded-md text-transparent bg-transparent focus-visible:ring-1 focus-visible:ring-dodgerblue" />
                    <label for="`size-${size.abbr}`" class="relative inline-flex items-center size-full pl-2.5 py-3 text-slate-600 text-base/none font-medium border border-slate-300 rounded-md bg-slate-50 | after:inline-flex after:shrink-0 after:order-first after:size-3 after:rounded-full after:bg-slate-300 after:ring-1 after:ring-transparent | peer-focus-visible:after:ring-dodgerblue after:ring-offset-[3px] | peer-checked:z-10 peer-checked:text-slate-950 peer-checked:font-bold peer-checked:border-blue-400 peer-checked:bg-blue-200 | peer-hover:border-blue-400 peer-hover:bg-blue-50 peer-hover:after:ring-dodgerblue peer-checked:after:bg-dodgerblue blue-500 peer-checked:after:ring-dodgerblue">
                        <abbr x-text="size.abbr" class="inline-block w-full text-center uppercase"></abbr>
                        <span x-text="size.name" class="sr-only"></span>
                    </label>
                </div>
                </template>
            </div>
        </fieldset>
    </form>
    <!--
    ========================================
    Non-essential :: Build-with logos
    ========================================
    -->
    <div class="w-full max-w-[320px] mx-auto mt-40">
        <p class="py-2 text-sm font-mono font-medium text-center lowercase text-gray-600 dark:text-gray- 400">Build with</p>
        <div class="flex items-center justify-between space-y-2 w-full">
            <svg class="w-auto h-4 fill-gray-700 dark:fill-gray- 300" width="192" height="24" viewBox="0 0 262 33" xmlns="http://www.w3.org/2000/svg"><path fill="#06B6D4" d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"/><text x="64" y="30" text-anchor="start" style="font-size:36px;font-family:Poppins-SemiBold,Poppins;font-weight:600;letter-spacing:-0.05rem;">tailwindcss</text></svg>
            <svg class="w-auto h-5 fill-gray-600 dark:fill-gray- 300" width="148" height="24" viewBox="0 0 148 24" xmlns="http://www.w3.org/2000/svg"><rect hidden fill="none" stroke="none" width="148" height="24"/><path fill="#77c1d2" d="M30.46.49l8.7,8.67-8.7,8.66-8.7-8.66Z"/><path fill="#2d3441" class="fill-slate-500" d="M8.7.49l18,18H9.34L0,9.16Z"/><text style="font-size:1.15rem;font-weight:800;" class="" x="48" y="16" text-anchor="start" >Alpine.js</text></svg>
        </div>
    </div>
</div>

input-radio-size-chart-selector-w-alpine-js-tailwindcss.markdown

Input "radio" size chart selector w/ Alpine.js & TailwindCSS

A Pen by Ondreas on CodePen.

License.

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
.font-sans {
    font-family: "Inter var",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
}