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

1.1k

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

1 year ago

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

Author:
Anonymous

1 year ago

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

Author:
Cristian

6 months ago

935
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

2 weeks ago

246
Glassmorphism form

Author:
Geoffrey Callaghan

1 year ago

5.5k
Invoice template

Author:
Shakti

1 year ago

24.3k
Half filled circle with tailwind

Author:
Alok

1 year ago

11.9k
Designing a Responsive Form Layouts with Tailwind CSS
Enhance your web application by building a sleek and responsive Form Layouts using Tailwind CSS. This comprehensive guide walks you through creating an interactive Form Layouts section featuring.

Author:
zobaidul kaziex

2 months ago

576
Upvote downvote buttons

Author:
Lucas Martinez

1 year ago

10.2k
Checkbox button
press the button to check

Author:
Anonymous

9 months ago

2.5k
Maintenance mode

Author:
Maxim

9 months ago

2.3k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

10.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent