[FEATURE]: checkbox in tailwind

Author: Rancho2002

tailwind_components/forms/checkbox.jsx

@@ -0,0 +1,33 @@
+import {stripIndent} from "react-codepen-prefill-embed";
+
+const check_box = stripIndent`
+<div className="flex justify-center mt-56 bg-slate-300 w-1/2 mx-auto p-4">
+  <div>
+    <div className="form-check">
+      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
+      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
+        Checkbox
+      </label>
+    </div>
+    <div className="form-check">
+      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
+      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
+        Checkbox
+      </label>
+    </div>
+    <div className="form-check">
+      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
+      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
+        Checkbox
+      </label>
+    </div>
+    <div className="form-check">
+      <input className="form-check-input h-4 w-4 border  border-blue-500 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain float-left mr-2 cursor-pointer " type="checkbox" value="" id="flexCheckDefault"/>
+      <label className="form-check-label inline-block text-gray-800" for="flexCheckDefault">
+        Checkbox
+      </label>
+    </div>
+  </div>
+</div>`;
+
+export default check_box;