JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div class="tab_content">
  <div class="btn">
    <div class="conbox con1"></div>
    <div class="conbox con2"></div>
    <div class="conbox con3"></div>

    <input type="radio" name="tabmenu" id="tab01" checked>
    <label for="tab01"></label>
    <input type="radio" name="tabmenu" id="tab02">
    <label for="tab02"></label>
    <input type="radio" name="tabmenu" id="tab03">
    <label for="tab03"></label>
  </div>
</div>

CSS

div.conbox {
		width: 800px;
		height: 600px;
		background-size: 400px auto;
		background-repeat: no-repeat;
		display:none;
		margin:0 auto;
    }
    div.conbox.con1 {
    	background-image: url("https://ssl.pstatic.net/static/kin/09renewal/promotion/main/rb_4_main_20230403004000.jfif?ver=20230403124000");
    }
    div.conbox.con2 {
    	background-image: url("https://ssl.pstatic.net/static/kin/09renewal/promotion/main/rb_5_main_20230403003725.jpg?ver=20230403123725");
    }
    div.conbox.con3 {
    	background-image: url("https://ssl.pstatic.net/static/kin/09renewal/promotion/main/rb_8_main_20230331122835.png?ver=20230331122835");
    }
    div.btn {
    	text-align:center;
    }
    label {
    	width:30px; height:30px; border-radius:100%; display:inline-block; background:grey;
    }
    input[type="radio"] {
    	display:none;
    }
    input#tab01[type="radio"]:checked + label {
    	background:blue;
    }
    input#tab02[type="radio"]:checked + label {
    	background:yellow;
    }
    input#tab03[type="radio"]:checked + label {
    	background:red;
    }
    div.conbox:hover {
    	opacity: 50%;
    }
    div.conbox.con1:hover {
    	box-shadow: 0 0 10px blue;
    }
    div.conbox.con2:hover {
    	box-shadow: 0 0 10px yellow;
    }
    div.conbox.con3:hover {
    	box-shadow: 0 0 10px red;
    }
    div.btn:has(input#tab01[type="radio"]:checked) .con1 {
    	display:block;
    }
    div.btn:has(input#tab02[type="radio"]:checked) .con2 {
    	display:block;
    }
    div.btn:has(input#tab03[type="radio"]:checked) .con3 {
    	display:block;
    }