<!-- nosimple -->
<div x-data>
    <div class="b-flex flex-wrap">
        <template x-for="i in 9">
            <div :class="{
                    'bg-blue100 t-blue500': i == 1,
                    'bg-blue200 t-blue600': i == 2,
                    'bg-blue300 t-blue700': i == 3,
                    'bg-blue400 t-blue800': i == 4,
                    'bg-blue500 t-white': i == 5,
                    'bg-blue600 t-blue50': i == 6,
                    'bg-blue700 t-blue100': i == 7,
                    'bg-blue800 t-blue200': i == 8,
                    'bg-blue900 t-blue300': i == 9,
            }" x-text="'blue' + i + '00'" class="pad10 t90"></div>
        </template>
    </div>
</div>
<!-- /nosimple -->