Checkbox

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

Other

Author Aman kumar

Tailwind v3.4 2.8k 9

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

Privacy policy page template

Anonymous

2 years ago

3.4k
Solo leveling 2
Animation & movie field,videos,games.

ORGIN_DREAMS

1 year ago

1.2k
tab4
table

Anonymous

1 month ago

17
background animation
background animation

Jayendra Madara

2 years ago

4k
Moving Background Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

4.4k
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Alif Bima Pradana

8 months ago

1.3k
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Tofayel Islam

10 months ago

794
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

KULDEEP

1 year ago

1.5k
profile
user profile

gidy

1 year ago

1.1k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Ameth Galarcio

1 year ago

3k
default images playground
an images gallery

mingderwang

4 months ago

113
info form

Anonymous

3 weeks ago

91