Home
kishan pc
Stacked Checkboxes

Stacked Checkboxes

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

Input Other

Author kishan pc

2.6k

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

Author:
Lîmåã M

2 years ago

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

Author:
Anonymous

2 years ago

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

Author:
Cristian

1 year ago

1.9k
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.

Author:
SHARIFUL ISLAM

8 months ago

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

Author:
Ayman Reifoun

6 months ago

594
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

172
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

7 months ago

651
authentication form terminal
authentication form with zsh on mac terminal looks

Author:
ardianhu

1 year ago

2.7k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

1 month ago

95
Checkbox
Checkbox

Author:
Aman kumar

1 year ago

2k
Privacy policy page template

Author:
Sameer Sultana

2 years ago

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

Author:
Ameth Galarcio

8 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components