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

130

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

1 month ago

136
Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

2 months ago

308
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

1 month ago

351
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

3 months ago

641
Image Gallery with Alpine.Js

Author:
Maxim

4 months ago

279
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

10 months ago

1.5k
Concert ticket

Author:
Elijah Davis

2 years ago

12.9k
Age verification 18+

Author:
Maxim

5 months ago

496
Popover
basic popover example

Author:
Dipti narayan

1 year ago

11.9k
Neumorphic Toggle Switch

Author:
Anonymous

5 months ago

1k
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

2 weeks ago

82
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components