پیشنمایش زنده
کد HTML
<div
class="flex space-x-2 border-[3px] border-purple-400 rounded-xl select-none"
>
<label
class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
>
<input
type="radio"
name="radio"
value="html"
class="peer hidden"
checked=""
/>
<span
class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
>HTML</span
>
</label>
<label
class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
>
<input type="radio" name="radio" value="react" class="peer hidden" />
<span
class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
>React</span
>
</label>
<label
class="radio flex flex-grow items-center justify-center rounded-lg p-1 cursor-pointer"
>
<input type="radio" name="radio" value="vue" class="peer hidden" />
<span
class="tracking-widest peer-checked:bg-gradient-to-r peer-checked:from-[blueviolet] peer-checked:to-[violet] peer-checked:text-white text-gray-700 p-2 rounded-lg transition duration-150 ease-in-out"
>Vue</span
>
</label>
</div>
کد CSS
.flex{display:flex}.hidden{display:none}.flex-grow{flex-grow:1}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.5rem * var(--tw-space-x-reverse));margin-left:calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border-\[3px\]{border-width:3px}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252 / var(--tw-border-opacity))}.p-1{padding:0.25rem}.p-2{padding:0.5rem}.tracking-widest{letter-spacing:0.1em}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.peer:checked ~ .peer-checked\:bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.peer:checked ~ .peer-checked\:from-\[blueviolet\]{--tw-gradient-from:blueviolet var(--tw-gradient-from-position);--tw-gradient-to:rgb(138 43 226 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.peer:checked ~ .peer-checked\:to-\[violet\]{--tw-gradient-to:violet var(--tw-gradient-to-position)}.peer:checked ~ .peer-checked\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}