Home
QQ-VVN
Checkbox models

Checkbox models

Tailwind Checkbox models

This tailwind example is contributed by QQ-VVN, on 11-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Toggle switch Other

Author QQ-VVN

975

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 flex justify-center items-center w-screen h-screen p-5">
  <div class="grid grid-cols-5 gap-6 p-6 bg-gray-900">
  
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-3 w-3 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-sm">Küçük</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white">Normal</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-lg">Orta</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-6 w-6 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-xl">Büyük</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-7 w-7 text-blue-600 rounded focus:ring-blue-500">
    <span class="text-white text-2xl">Ekstra Büyük</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-blue-600 peer-checked:border-blue-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Mavi</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-red-600 peer-checked:border-red-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Kırmızı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-green-600 peer-checked:border-green-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Yeşil</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-yellow-600 peer-checked:border-yellow-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Sarı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-purple-600 peer-checked:border-purple-600 border-2 border-gray-500"></div>
      <div class="absolute hidden w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:block"></div>
    </div>
    <span class="text-white">Özel Mor</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-blue-600 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 1</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-red-600 peer-checked:scale-110 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 2</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-full peer-checked:bg-green-600 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 bg-white rounded-full left-1.5 top-1.5 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 3</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-yellow-600 peer-checked:rotate-90 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 4</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-purple-600 peer-checked:border-purple-600 border-2 border-gray-500 transition-all duration-300 ease-in-out"></div>
      <div class="absolute opacity-0 w-4 h-4 bg-white rounded-sm left-1 top-1 scale-0 peer-checked:scale-75 peer-checked:opacity-100 transition-all duration-300 delay-100"></div>
    </div>
    <span class="text-white">Animasyonlu 5</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-blue-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Mavi</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-red-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Kırmızı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-green-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Yeşil</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-yellow-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Sarı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-11 h-6 bg-gray-700 rounded-full peer-checked:bg-purple-600 transition-colors duration-300"></div>
      <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all duration-300 peer-checked:left-6"></div>
    </div>
    <span class="text-white">Toggle Mor</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600 rounded focus:ring-blue-500 shadow-lg shadow-blue-500/30">
    <span class="text-white">Gölgeli Mavi</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-red-600 rounded focus:ring-red-500 shadow-lg shadow-red-500/30">
    <span class="text-white">Gölgeli Kırmızı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-green-600 rounded focus:ring-green-500 shadow-lg shadow-green-500/30">
    <span class="text-white">Gölgeli Yeşil</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 rounded focus:ring-yellow-500 shadow-lg shadow-yellow-500/30">
    <span class="text-white">Gölgeli Sarı</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded focus:ring-purple-500 shadow-lg shadow-purple-500/30">
    <span class="text-white">Gölgeli Mor</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-blue-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 1</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-red-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 2</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-green-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12z"></path>
        <path d="M10 6a1 1 0 011 1v3a1 1 0 01-1 1H7a1 1 0 110-2h2V7a1 1 0 011-1z"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 3</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-yellow-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 4</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 rounded-md peer-checked:bg-purple-600 transition-all duration-300"></div>
      <svg class="absolute w-4 h-4 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <span class="text-white">İkonlu 5</span>
  </label>
  
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-blue-600 transition-all duration-300 transform rotate-45"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Kare Döndürülmüş</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-0 h-0 border-l-[12px] border-r-[12px] border-b-[20px] border-l-transparent border-r-transparent border-b-gray-700 peer-checked:border-b-red-600 transition-colors duration-300"></div>
      <div class="absolute opacity-0 w-2 h-2 bg-white rounded-full left-[5px] top-[10px] peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Üçgen</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-green-600 transition-all duration-300 clip-path-hexagon"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Altıgen</span>
    <style>
      .clip-path-hexagon {
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
    </style>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-yellow-600 transition-all duration-300 rounded-tl-xl rounded-br-xl"></div>
      <div class="absolute opacity-0 w-3 h-3 border-b-2 border-r-2 border-white transform rotate-45 left-1.5 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Özel Köşeler</span>
  </label>
  
  <label class="flex items-center space-x-3 cursor-pointer">
    <div class="relative">
      <input type="checkbox" class="sr-only peer">
      <div class="w-6 h-6 bg-gray-700 peer-checked:bg-purple-600 transition-all duration-300 rounded-full"></div>
      <div class="absolute opacity-0 w-4 h-4 border-2 border-white rounded-full left-1 top-1 peer-checked:opacity-100 transition-opacity duration-300 delay-100"></div>
    </div>
    <span class="text-white">Daire İçinde Daire</span>
  </label>
</div>

</div>

Related Examples

Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

9 months ago

713
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

6 months ago

938
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

8 months ago

1.1k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

1 year ago

1k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

11 months ago

1.8k
Sign up
sign up page

Author:
gidy

8 months ago

1.3k
Snake Game tailwind
snake game

Author:
QQ-VVN

8 months ago

657
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

10 months ago

1.1k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

11 months ago

1.2k
Payment success page example

Author:
Anonymous

8 months ago

1.4k
Testimonial that What Client Says

Author:
Abdul Baset Bappy

7 months ago

801
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components