پیشنمایش زنده
کد HTML
<div
class="w-[300px] px-4 py-5 bg-white flex flex-col gap-3 rounded-md shadow-[0px_0px_15px_rgba(0,0,0,0.09)]"
>
<legend class="text-xl font-semibold mb-3 select-none">Choose One</legend>
<label
for="html"
name="status"
class="font-medium h-14 relative hover:bg-zinc-100 flex items-center px-3 gap-3 rounded-lg has-[:checked]:text-blue-500 has-[:checked]:bg-blue-50 has-[:checked]:ring-blue-300 has-[:checked]:ring-1 select-none"
>
<div class="w-5 fill-blue-500">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="currentColor"
version="1.1"
viewBox="0 0 512 512"
xml:space="preserve"
>
<g id="c133de6af664cd4f011a55de6b0011b2">
<path
display="inline"
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>
</g>
</svg>
</div>
HTML
<input
checked=""
type="radio"
name="status"
class="peer/html w-4 h-4 absolute accent-current right-3"
id="html"
/>
</label>
<label
for="css"
class="font-medium h-14 relative hover:bg-zinc-100 flex items-center px-3 gap-3 rounded-lg has-[:checked]:text-blue-500 has-[:checked]:bg-blue-50 has-[:checked]:ring-blue-300 has-[:checked]:ring-1 select-none"
>
<div class="w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 24 24"
role="img"
>
<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>
CSS
<input
type="radio"
name="status"
class="w-4 h-4 absolute accent-current right-3"
id="css"
/>
</label>
<label
for="javascript"
name="html"
class="font-medium h-14 relative hover:bg-zinc-100 flex items-center px-3 gap-3 rounded-lg has-[:checked]:text-blue-500 has-[:checked]:bg-blue-50 has-[:checked]:ring-blue-300 has-[:checked]:ring-1 select-none"
>
<div class="w-5">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="currentColor"
version="1.1"
viewBox="0 0 512 512"
xml:space="preserve"
>
<g id="5151e0c8492e5103c096af88a51e75c7">
<path
display="inline"
fill-rule="evenodd"
clip-rule="evenodd"
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>
</g>
</svg>
</div>
JavaScript
<input
type="radio"
name="status"
class="w-4 h-4 absolute accent-blue-500 right-3"
id="javascript"
/>
</label>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.right-3 {
right: 0.75rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.flex {
display: flex;
}
.h-14 {
height: 3.5rem;
}
.h-4 {
height: 1rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-\[300px\] {
width: 300px;
}
.select-none {
-webkit-user-select: none;
user-select: none;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.gap-3 {
gap: 0.75rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fill-blue-500 {
fill: #3b82f6;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.accent-blue-500 {
accent-color: #3b82f6;
}
.accent-current {
accent-color: currentColor;
}
.shadow-\[0px_0px_15px_rgba\(0\2c 0\2c 0\2c 0\.09\)\] {
--tw-shadow: 0px 0px 15px rgba(0, 0, 0, 0.09);
--tw-shadow-colored: 0px 0px 15px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:bg-zinc-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(244 244 245 / var(--tw-bg-opacity));
}
.has-\[\:checked\]\:bg-blue-50:has(:checked) {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.has-\[\:checked\]\:text-blue-500:has(:checked) {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
}
.has-\[\:checked\]\:ring-1: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(1px + 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-300:has(:checked) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
}