Give directly styled radios a different name attribute

Author: adamwathan

pages/index.mdx

@@ -276,19 +276,19 @@ If you only need to support Edge and not IE 11, you can also add the `form-check
     <div class="mt-2">
       <div>
         <label class="inline-flex items-center">
-          <input type="radio" class="form-radio text-gray-800" name="radio" value="1" checked/>
+          <input type="radio" class="form-radio text-gray-800" name="radio-direct" value="1" checked/>
           <span class="ml-2">Option 1</span>
         </label>
       </div>
       <div>
         <label class="inline-flex items-center">
-          <input type="radio" class="form-radio text-gray-800" name="radio" value="2"/>
+          <input type="radio" class="form-radio text-gray-800" name="radio-direct" value="2"/>
           <span class="ml-2">Option 2</span>
         </label>
       </div>
       <div>
         <label class="inline-flex items-center">
-          <input type="radio" class="form-radio text-gray-800" name="radio" value="3"/>
+          <input type="radio" class="form-radio text-gray-800" name="radio-direct" value="3"/>
           <span class="ml-2">Option 3</span>
         </label>
       </div>