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

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

Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.6k
Payment form

Author:
ORGIN_DREAMS

5 months ago

449
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
Tailwind css banner offer
Bold neobrutalist design with thick borders, vibrant colors, and strong shadows - perfect for promotions.

Author:
saim-t8

2 months ago

347
cards
cards with background animation

Author:
Anonymous

2 years ago

11.1k
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.6k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

6 months ago

874
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.7k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

3 months ago

680
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

4 months ago

497
magic card
by salvator

Author:
Baraka Salvator

5 months ago

794
Tailwind CSS Navbar
Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

Author:
KULDEEP

4 months ago

738

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components