diff --git a/src/app/core/services/formatter.service.spec.ts b/src/app/core/services/formatter.service.spec.ts
index cc1f13e..de6db7e 100644
--- a/src/app/core/services/formatter.service.spec.ts
+++ b/src/app/core/services/formatter.service.spec.ts
@@ -249,6 +249,42 @@ describe('Service: Formatter', () => {
 			}
 		));
 
+		it('should add closing slash to col elements but not colgroup', inject(
+			[FormatterService],
+			(service: FormatterService) => {
+				const str = `
+				<colgroup>
+					<col class="w-5">
+					<col>
+					<col>
+					<col>
+					<col>
+					<col>
+					<col class="w-5">
+				</colgroup>`;
+				const result = `
+				<colgroup>
+					<col className="w-5" />
+					<col />
+					<col />
+					<col />
+					<col />
+					<col />
+					<col className="w-5" />
+				</colgroup>`;
+				expect(service.useReactSyntax(str)).toBe(result);
+			}
+		));
+
+		it('should not add a closing slash to col elements if it already has one', inject(
+			[FormatterService],
+			(service: FormatterService) => {
+				const str = `<col class="w-5" /><col />`;
+				const result = `<col className="w-5" /><col />`;
+				expect(service.useReactSyntax(str)).toBe(result);
+			}
+		));
+
 		it('should change svg properties to camelCase', inject(
 			[FormatterService],
 			(service: FormatterService) => {
diff --git a/src/app/core/services/formatter.service.ts b/src/app/core/services/formatter.service.ts
index c1f5210..2eeb636 100644
--- a/src/app/core/services/formatter.service.ts
+++ b/src/app/core/services/formatter.service.ts
@@ -108,17 +108,32 @@ export class FormatterService {
 	}
 
 	useReactSyntax(codeStr: string): string {
-		const cleanStroke = codeStr.replace(/(stroke)-[a-z]/g, prop => {
-			const parts = prop.split('-');
-			return parts[0] + parts[1].toUpperCase();
-		});
-		const cleanSVGs = cleanStroke.replace(/(fill|clip)-rule/g, prop => {
-			const parts = prop.split('-');
-			return parts[0] + parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
-		});
-		const closeImgTags = cleanSVGs.replace(/<img ([^<]*[^/\s])[\s]?>/g, '<img $1 />');
-		const closeInputTags = closeImgTags.replace(/<input ([^<]*[^/\s])[\s]?>/g, '<input $1 />');
-		return closeInputTags.replace(/class=/gm, 'className=');
+		const reactSyntax = codeStr
+			.replace(/(stroke)-[a-z]/g, prop => {
+				const parts = prop.split('-');
+				return parts[0] + parts[1].toUpperCase();
+			})
+			.replace(/(fill|clip)-rule/g, prop => {
+				const parts = prop.split('-');
+				return parts[0] + parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
+			})
+			.replace(/<img ([^<]*[^/\s])[\s]?>/g, '<img $1 />')
+			.replace(/<input ([^<]*[^/\s])[\s]?>/g, '<input $1 />')
+			.replace(/<area([^<]*[^/\s])[\s]?>/g, '<area $1 />')
+			.replace(/<base([^<]*[^/\s])[\s]?>/g, '<base $1 />')
+			.replace(/<br([^<]*[^/\s])[\s]?>/g, '<br $1 />')
+			.replace(/<col[^group]([^<]*[^/\s])[\s]?>/g, '<col $1 />')
+			.replace(/<col>/g, '<col />')
+			.replace(/<embed([^<]*[^/\s])[\s]?>/g, '<embed $1 />')
+			.replace(/<hr([^<]*[^/\s])[\s]?>/g, '<hr $1 />')
+			.replace(/<link([^<]*[^/\s])[\s]?>/g, '<link $1 />')
+			.replace(/<meta([^<]*[^/\s])[\s]?>/g, '<meta $1 />')
+			.replace(/<param([^<]*[^/\s])[\s]?>/g, '<param $1 />')
+			.replace(/<source([^<]*[^/\s])[\s]?>/g, '<source $1 />')
+			.replace(/<track([^<]*[^/\s])[\s]?>/g, '<track $1 />')
+			.replace(/<wbr([^<]*[^/\s])[\s]?>/g, '<wbr />')
+			.replace(/class=/gm, 'className=');
+		return reactSyntax;
 	}
 
 	toVue(codeStr: string): string {