Home
Aman kumar
Checkbox

Checkbox

This tailwind example is contributed by Aman kumar, on 28-Jun-2024. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Aman kumar

1.2k

Fork Fullscreen

<div class="space-y-2">
  <label
    class="has-[:checked]:bg-white/30 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 has-[:checked]:ring-2 cursor-pointer bg-white/40 hover:bg-white/20 w-72 p-4 rounded-md flex justify-between items-center shadow"
  >
    <div class="flex items-center space-x-5">
      <div class="flex items-center">
        <svg
          class="w-4 h-4 text-black"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            fill-rule="evenodd"
            d="M12.037 21.998a10.313 10.313 0 0 1-7.168-3.049 9.888 9.888 0 0 1-2.868-7.118 9.947 9.947 0 0 1 3.064-6.949A10.37 10.37 0 0 1 12.212 2h.176a9.935 9.935 0 0 1 6.614 2.564L16.457 6.88a6.187 6.187 0 0 0-4.131-1.566 6.9 6.9 0 0 0-4.794 1.913 6.618 6.618 0 0 0-2.045 4.657 6.608 6.608 0 0 0 1.882 4.723 6.891 6.891 0 0 0 4.725 2.07h.143c1.41.072 2.8-.354 3.917-1.2a5.77 5.77 0 0 0 2.172-3.41l.043-.117H12.22v-3.41h9.678c.075.617.109 1.238.1 1.859-.099 5.741-4.017 9.6-9.746 9.6l-.215-.002Z"
            clip-rule="evenodd"
          ></path>
        </svg>
        <span> Pay </span>
      </div>
      <h2 class="text-lg">Google Pay</h2>
    </div>
    <input
      type="radio"
      name="payment"
      class="checked:border-indigo-500 h-5 w-5"
    />
  </label>
  <label
    class="has-[:checked]:bg-white/30 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 has-[:checked]:ring-2 cursor-pointer bg-white/40 hover:bg-white/20 w-72 p-4 rounded-md flex justify-between items-center shadow"
  >
    <div class="flex items-center space-x-5">
      <div class="flex items-center">
        <svg
          class="w-4 h-4 text-black"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          fill="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            d="M17.537 12.625a4.421 4.421 0 0 0 2.684 4.047 10.96 10.96 0 0 1-1.384 2.845c-.834 1.218-1.7 2.432-3.062 2.457-1.34.025-1.77-.794-3.3-.794-1.531 0-2.01.769-3.275.82-1.316.049-2.317-1.318-3.158-2.532-1.72-2.484-3.032-7.017-1.27-10.077A4.9 4.9 0 0 1 8.91 6.884c1.292-.025 2.51.869 3.3.869.789 0 2.27-1.075 3.828-.917a4.67 4.67 0 0 1 3.66 1.984 4.524 4.524 0 0 0-2.16 3.805m-2.52-7.432A4.4 4.4 0 0 0 16.06 2a4.482 4.482 0 0 0-2.945 1.516 4.185 4.185 0 0 0-1.061 3.093 3.708 3.708 0 0 0 2.967-1.416Z"
          ></path>
        </svg>
        <span> Pay </span>
      </div>
      <h2 class="text-lg">Apple Pay</h2>
    </div>
    <input
      type="radio"
      name="payment"
      class="checked:border-indigo-500 h-5 w-5"
    />
  </label>
</div>

Related Examples

Simple dialpad

Author:
Brandon D

2 years ago

10.9k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

11 months ago

2.7k
Payment Cards

Author:
Shammi Nethupul

10 months ago

2k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

66
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

4 weeks ago

13
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

10.8k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

8.3k
Login AND Signup
login and signup

Author:
Uwera Dorcas

2 weeks ago

115
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

8 months ago

1.5k
Elegant NavBar + Drawer
A NavBar, a responsive drawer/sidebar, and other useful Tailwind components to get started creating an app. Pure CSS, no JavaScript needed (although this example uses a bit of JS).

Author:
Nick Girga

1 month ago

253
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

7.8k
chart
to chart on your family and

Author:
Nishimwe Jeanine

2 weeks ago

87

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components