JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="main.css" />
    <link rel="stylesheet" href="main.js" />
 
    <title>REXIN 3D-AR DEMO</title>


    <style>

    </style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        var inputValue = $(this).attr("value");
        var targetBox = $("." + inputValue);
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    });
});
</script>
</head>


<body>


  <div class="split left">

  </div>
    
   
  <div class="split right">

  
   <div class="centered2">   
     <div class="section over-hide z-bigger">
       <input class="checkbox" type="checkbox" name="general" id="general">
         <div class="section over-hide z-bigger">
           <div class="container pb-5">
              <div class="row justify-content-center pb-5">

                <div class="col-12 pb-5">


                  
                 <input class="checkbox-tools" type="radio" name="tools" id="tool-1" value="product"checked >
                 <label class="for-checkbox-tools" for="tool-1">           
                 <img src="Assets/producticonblack.png" width="100%" height="100%">
                 </label>
                 <br>

                 <input class="checkbox-tools" type="radio" name="tools" id="tool-2" value="length" >
                 <label class="for-checkbox-tools" for="tool-2">
                 <img src="Assets/uzunlukiconsiyah.png" width="100%" height="100%">
                 </label>
                 <br>

                 <input class="checkbox-tools" type="radio" name="tools" id="tool-3" value="color" >
                 <label class="for-checkbox-tools" for="tool-3">           
                 <img...

CSS

/* PRODUCTS AND BUTTONS */


.button4 {
	background-color: #00000018;
	border: none;
	color: rgb(0, 0, 0);
	padding: 5.5px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	margin: 3px 3px;
	cursor: pointer;
	border-radius: 7px;

	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	
  }
  
  .button4:hover {
	background-color: #ffffff;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	transition-duration: 0.5s;
	
}



.button5 {
	background-color: #00000018;
	border: none;
	color: rgb(0, 0, 0);
	padding: 5.5px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 80%;
	margin: 3px 3px;
	cursor: pointer;
	border-radius: 7px;
	width: 50%;


	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	
  }
  
  .button5:hover {
	background-color: #ffffff;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	transition-duration: 0.5s;
	
}



.button5-1 {
	background-color: #b30202;
	border: none;
	color: rgb(0, 0, 0);
	padding: 5.5px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 80%;
	margin: 3px 3px;
	cursor: pointer;
	border-radius: 7px;
	width: 50%;


	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	
  }
  
  .button5-1:hover {
	background-color: #ffffff9c;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	transition-duration: 0.5s;
	
}

.button5-2 {
	background-color: #0611ad;
	border: none;
	color: rgb(0, 0, 0);
	padding: 5.5px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 80%;
	margin: 3px 3px;
	cursor: pointer;
	border-radius: 7px;
	width: 50%;


	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	
  }
  .button5-2:hover {
	background-color: #ffffff9c;
	box-shadow: 0 4px 6px 0 rgba(0,0,0,0.24), 0 17px 50px 0...