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

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.5k
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

2 years ago

8.6k
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.2k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

5 months ago

581
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.3k
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

4 months ago

833
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

3 months ago

300
File upload input section with file preview

Author:
Noob

3 years ago

11.9k
Full HTML Version
What's Included: Title*: Required input Description: Optional textarea Fully responsive and dark mode ready Simple validation (required on title)

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

379
Console like input field

Author:
Charlotte Dupont

2 years ago

11.6k
Domain For Sale Template
Domain For Sale Template

Author:
Geoffrey Callaghan

1 year ago

3.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components