Home
ROHIT RAJPUT
Super input radio card

Super input radio card

card
input radio
simple input card
input design
awesome card design
rounded
black
shadow
blue
border
gray
icon
card
radio
option
HTML
CSS
select
JavaScript
dropdown

This tailwind example is contributed by ROHIT RAJPUT, on 21-Nov-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Vote

Radio Rating

Author ROHIT RAJPUT

1.2k

Fork Fullscreen

<div
  class="w-[300px] mx-auto 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>

Related Examples

Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

3 months ago

489
Card
travel place card hover effect card

Author:
nahid hasan

5 months ago

1.1k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

3 months ago

480
Emoji rating

Author:
Brandon D

2 years ago

12.1k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.6k
Rating with text
you also want to show a text near the stars you can use this example as a reference. @zobaidulkazi

Author:
zobaidul kaziex

1 year ago

1.4k
User review form
Write a review form star rating form

Author:
Quentin Rivers

9 months ago

1.9k
Star rating svg buttons
buttons consist of star,star-filled, and star half-filled

Author:
Prajwal Hallale

2 years ago

11.1k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

5 months ago

632
Product rating section
display star rating stats with user avatars

Author:
Erik Hyatt

2 years ago

11.2k
rating system with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

1.6k
Rating stars

Author:
Bunny

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components