From 13d72a6123c04f196c3a20f275aae047a4ab4f2c Mon Sep 17 00:00:00 2001
From: Fabian Vilers <fabian.vilers@dev-one.com>
Date: Wed, 17 Feb 2021 13:04:44 +0100
Subject: [PATCH] Add ID to checkboxes and corresponding label's for attribute

---
 index.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index ea5fbab..f18d4c8 100644
--- a/index.html
+++ b/index.html
@@ -58,8 +58,8 @@ <h2 class="text-2xl font-bold">Unstyled</h2>
               <div class="block">
                 <div class="mt-2">
                   <div>
-                    <label class="inline-flex items-center">
-                      <input type="checkbox" checked />
+                    <label class="inline-flex items-center" for="email1">
+                      <input id="email1" type="checkbox" checked />
                       <span class="ml-2">Email me news and special offers</span>
                     </label>
                   </div>
@@ -116,8 +116,9 @@ <h2 class="text-2xl font-bold">Simple</h2>
               <div class="block">
                 <div class="mt-2">
                   <div>
-                    <label class="inline-flex items-center">
+                    <label class="inline-flex items-center" for="email2">
                       <input
+                        id="email2"
                         type="checkbox"
                         class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                         checked
@@ -178,8 +179,9 @@ <h2 class="text-2xl font-bold">Underline</h2>
               <div class="block">
                 <div class="mt-2">
                   <div>
-                    <label class="inline-flex items-center">
+                    <label class="inline-flex items-center" for="email3">
                       <input
+                        id="email3"
                         type="checkbox"
                         class="border-gray-300 border-2 text-black focus:border-gray-300 focus:ring-black"
                       />
@@ -239,8 +241,9 @@ <h2 class="text-2xl font-bold">Solid</h2>
               <div class="block">
                 <div class="mt-2">
                   <div>
-                    <label class="inline-flex items-center">
+                    <label class="inline-flex items-center" id="email4">
                       <input
+                        id="email4"
                         type="checkbox"
                         class="rounded bg-gray-200 border-transparent focus:border-transparent focus:bg-gray-200 text-gray-700 focus:ring-1 focus:ring-offset-2 focus:ring-gray-500"
                       />