پیشنمایش زنده
کد HTML
<div
class="w-[320px] px-8 py-8 bg-gray-800 flex flex-col gap-5 rounded-lg shadow-[0px_0px_20px_rgba(0,0,0,0.3)]"
>
<legend class="text-xl font-bold mb-2 text-white select-none">
Choose One
</legend>
<label
for="html"
name="status"
class="font-medium h-16 relative hover:bg-gray-700 transition-all duration-300 flex items-center px-5 gap-3 rounded-lg has-[:checked]:text-blue-400 has-[:checked]:bg-gray-700 has-[:checked]:ring-blue-500 has-[:checked]:ring-2 select-none cursor-pointer"
>
<div class="w-5 fill-current text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M30.713,0.501L71.717,460.42l184.006,51.078l184.515-51.15L481.287,0.501H30.713z M395.754,109.646 l-2.567,28.596l-1.128,12.681h-0.187H256h-0.197h-79.599l5.155,57.761h74.444H256h115.723h15.201l-1.377,15.146l-13.255,148.506 l-0.849,9.523L256,413.854v0.012l-0.259,0.072l-115.547-32.078l-7.903-88.566h26.098h30.526l4.016,44.986l62.82,16.965l0.052-0.014 v-0.006l62.916-16.977l6.542-73.158H256h-0.197H129.771l-13.863-155.444l-1.351-15.131h141.247H256h141.104L395.754,109.646z"
></path>
</svg>
</div>
<span class="text-white">HTML</span>
<input
checked=""
type="radio"
name="status"
class="peer/html w-4 h-4 absolute accent-blue-400 right-5 transition-all duration-300"
id="html"
/>
<span
class="absolute right-5 w-4 h-4 rounded-full border-2 border-gray-400 peer-checked/html:border-blue-400 peer-checked/html:bg-blue-400 transition-all duration-300"
></span>
</label>
<label
for="css"
class="font-medium h-16 relative hover:bg-gray-700 transition-all duration-300 flex items-center px-5 gap-3 rounded-lg has-[:checked]:text-blue-400 has-[:checked]:bg-gray-700 has-[:checked]:ring-blue-500 has-[:checked]:ring-2 select-none cursor-pointer"
>
<div class="w-5 fill-current text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"
></path>
</svg>
</div>
<span class="text-white">CSS</span>
<input
type="radio"
name="status"
class="peer/css w-4 h-4 absolute accent-blue-400 right-5 transition-all duration-300"
id="css"
/>
<span
class="absolute right-5 w-4 h-4 rounded-full border-2 border-gray-400 peer-checked/css:border-blue-400 peer-checked/css:bg-blue-400 transition-all duration-300"
></span>
</label>
<label
for="javascript"
name="html"
class="font-medium h-16 relative hover:bg-gray-700 transition-all duration-300 flex items-center px-5 gap-3 rounded-lg has-[:checked]:text-blue-400 has-[:checked]:bg-gray-700 has-[:checked]:ring-blue-500 has-[:checked]:ring-2 select-none cursor-pointer"
>
<div class="w-5 fill-current text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M1.008,0.5C0.438,0.583,0.48,1.27,0.521,1.958 c0,169.668,0,339.31,0,508.974c169.364,1.135,340.808,0.162,510.979,0.486c0-170.309,0-340.61,0-510.918 C341.342,0.5,171.167,0.5,1.008,0.5z M259.893,452.167c-11.822,11.919-30.478,18.938-53.429,18.938 c-37.643,0-58.543-18.34-71.884-43.711c12.842-8.2,25.966-16.122,39.344-23.795c5.456,15.262,23.886,32.42,44.683,21.857 c13.183-6.699,11.661-27.01,11.661-49.054c0-45.773,0-98.578,0-139.872c-0.042-0.688-0.083-1.375,0.482-1.458 c15.707,0,31.413,0,47.116,0c0,36.788,0,78.402,0,117.529C277.866,395.199,280.91,430.988,259.893,452.167z M470.696,409.917 c-2.674,39.884-35.243,61.063-79.17,61.188c-43.062,0.124-70.624-19.013-87.433-48.567c12.085-8.317,25.778-15.017,38.375-22.822 c10.08,15.761,27.537,30.91,53.429,28.652c16.131-1.406,34.856-14.555,24.285-34.482c-5.127-9.66-17.516-14.567-28.656-19.425 c-35.352-15.424-76.828-29.571-72.861-84.992c1.327-18.514,9.852-31.525,20.889-40.796c11.311-9.5,26.46-15.867,46.629-16.511 c36.629-1.173,56.723,15.12,70.429,37.884c-11.664,8.891-24.514,16.608-37.401,24.281c-4.229-12.995-24.644-25.658-41.772-17.969 c-7.789,3.493-14.788,13.761-10.684,26.224c3.66,11.115,18.589,17.199,30.599,22.344 C433.706,340.486,474.331,355.693,470.696,409.917z"
></path>
</svg>
</div>
<span class="text-white">JavaScript</span>
<input
type="radio"
name="status"
class="peer/js w-4 h-4 absolute accent-blue-400 right-5 transition-all duration-300"
id="javascript"
/>
<span
class="absolute right-5 w-4 h-4 rounded-full border-2 border-gray-400 peer-checked/js:border-blue-400 peer-checked/js:bg-blue-400 transition-all duration-300"
></span>
</label>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.right-5{right:1.25rem}.mb-2{margin-bottom:0.5rem}.flex{display:flex}.h-16{height:4rem}.h-4{height:1rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-\[320px\]{width:320px}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-3{gap:0.75rem}.gap-5{gap:1.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border-2{border-width:2px}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175 / var(--tw-border-opacity))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.fill-current{fill:currentColor}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-8{padding-left:2rem;padding-right:2rem}.py-8{padding-top:2rem;padding-bottom:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.accent-blue-400{accent-color:#60a5fa}.shadow-\[0px_0px_20px_rgba\(0\2c 0\2c 0\2c 0\.3\)\]{--tw-shadow:0px 0px 20px rgba(0,0,0,0.3);--tw-shadow-colored:0px 0px 20px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\:bg-gray-700:hover{--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.peer\/css:checked ~ .peer-checked\/css\:border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}.peer\/html:checked ~ .peer-checked\/html\:border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}.peer\/js:checked ~ .peer-checked\/js\:border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}.peer\/css:checked ~ .peer-checked\/css\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.peer\/html:checked ~ .peer-checked\/html\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.peer\/js:checked ~ .peer-checked\/js\:bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.has-\[\:checked\]\:bg-gray-700:has(:checked){--tw-bg-opacity:1;background-color:rgb(55 65 81 / var(--tw-bg-opacity))}.has-\[\:checked\]\:text-blue-400:has(:checked){--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.has-\[\:checked\]\:ring-2:has(:checked){--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.has-\[\:checked\]\:ring-blue-500:has(:checked){--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity))}