Home
Pixel Perfect
Colored checkboxes

Colored checkboxes

use custom accent color according to your design

This tailwind example is contributed by Pixel Perfect, on 17-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Input

Author Pixel Perfect

4.2k

Fork Fullscreen

<div class="flex flex-col gap-2">
    <div>
        <label class="inline-flex items-center" for="redCheckBox">
          <input id="redCheckBox" type="checkbox" class="w-4 h-4 accent-red-600" checked>
          <span class="ml-2">Red checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="tealCheckBox">
          <input id="tealCheckBox" type="checkbox" class="w-4 h-4 accent-teal-600" checked>
          <span class="ml-2">Teal checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="yellowCheckBox">
          <input id="yellowCheckBox" type="checkbox" class="w-4 h-4 accent-yellow-600" checked>
          <span class="ml-2">Yellow checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="grayCheckBox">
          <input id="grayCheckBox" type="checkbox" class="w-4 h-4 accent-gray-700" checked>
          <span class="ml-2">Gray checkbox</span>
        </label>
    </div>
    <div>
        <label class="inline-flex items-center" for="indigoCheckBox">
          <input id="indigoCheckBox" type="checkbox" class="w-4 h-4 accent-indigo-700" checked>
          <span class="ml-2">Indigo checkbox</span>
        </label>
    </div>
</div>

Related Examples

Radio Buttons
Users can click anywhere on the input field to select the radio option

Author:
Prajwal Hallale

2 years ago

16.6k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.4k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

21.6k
Responsive Footer Section
This modern and responsive footer adapts seamlessly to all screen sizes, ensuring a clean and organized layout. It includes essential navigation links, contact details, and a subscription form, all structured for easy access. Using display: contents;, the design remains flexible and visually balanced, enhancing the user experience across devices.

Author:
ABDO-SY

1 month ago

160
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Author:
Nick Girga

2 weeks ago

31
Custom Carosel

Author:
Md. Tofayel islam

7 months ago

2k
test2

Author:
SHAHAD EIDAH ALHAERTHI

8 months ago

1.1k
File Upload

Author:
Rajesh Maheshwari

2 months ago

393
Range Slider

Author:
Alok

2 years ago

13.3k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

3 months ago

711
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

3 months ago

781
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

5.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components