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

2.4k

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 responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

9.7k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

11 months ago

1k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

3.2k
Concert ticket

Author:
Elijah Davis

3 years ago

13.6k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

1.1k
Health Tracker - Diet Calorie Management App
Health Tracker - Diet Calorie Management App

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

157
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

1 year ago

1.8k
Collapsible content

Author:
Rafferty Kim

2 years ago

14k
barbershop

Author:
Ishimwe Shadad

3 months ago

426
GMT Live Coding

Author:
Seth

1 month ago

43
Frontend Template Open Source Code Website
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Rathanak Phan

9 months ago

1.2k
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components