Stacked Checkboxes

This tailwind example is contributed by kishan pc, on 30-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Input Other

Author kishan pc

Tailwind v3.4 3.9k 9

Fork Fullscreen

<div class="w-40 text-xl font-semibold">
  <div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100 accent-teal-600">
    <input type="checkbox" id="htmlCheckbox" name="languageCheckbox" class="h-4 w-4 rounded border-gray-300 text-teal-600 shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="htmlCheckbox" class="flex w-full space-x-2 text-sm"> HTML </label>
  </div>
  <div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100 accent-teal-600">
    <input checked type="checkbox" id="cssCheckbox" name="languageCheckbox" class="h-4 w-4 rounded border-gray-300 text-teal-600 shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="cssCheckbox" class="flex w-full space-x-2 text-sm"> CSS </label>
  </div>
  <div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100 accent-teal-600">
    <input type="checkbox" id="javascriptCheckbox" name="languageCheckbox" class="h-4 w-4 rounded border-gray-300 text-teal-600 shadow-sm focus:border-teal-300 focus:ring focus:ring-teal-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400" />
    <label for="javascriptCheckbox" class="flex w-full space-x-2 text-sm"> JavaScript </label>
  </div>
</div>

Related Examples

Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

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

Anonymous

3 years ago

9.6k
Serious Input Html
Input text serious like apple or smth

Cristian

2 years ago

2.8k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

9 months ago

704
Simple Hero Section
Hero Section using Tailwind

Ahita Bisma Adlula

1 year ago

1.9k
OTP Verification Page

JUGENDRA GANGWAR

1 day ago

6
Login Form (Balsamiq Look)

Ahmad Syaifuddin

11 months ago

969
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.

Monica D.

2 years ago

4.2k
authentication form terminal
authentication form with zsh on mac terminal looks

ardianhu

2 years ago

3.5k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

irahoza daniel

1 year ago

1.5k