The CSS rule for the reset radio button makes both green and blue divs disappear. That shouldn’t be.
Just remove this part:
body {
margin: 0;
text-align: center;
font-family: Verdana;
background: #f5f5f5;
}
h1 {
text-align: center;
}
.container {
width: 70%;
margin: 0 auto;
display: grid;
}
input[type="radio"] {
display: none;
}
label {
width: 25%;
float: left;
text-align: center;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #222222;
padding: 0.5%;
margin: 0.5%;
margin-bottom: 30px;
cursor: pointer;
}
input[type="radio"][id="blue"]:checked+label {
background: #6666ff;
}
input[type="radio"][id="blue"]:checked~.green {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
input[type="radio"][id="green"]:checked+label {
background: #66dd99;
}
input[type="radio"][id="green"]:checked~.blue {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
/*
input[type="radio"][id="reset"]:checked~.green,
input[type="radio"][id="reset"]:checked~.blue {
display: block;
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
*/
.tile {
width: 17%;
height: 60px;
float: left;
transition: all 1s;
margin: 0.5%;
padding: 0.5%;
line-height: 60px;
}
.green {
background: #66dd99;
}
.blue {
background: #6666ff;
}<h1>FILTER BY COLOR</h1>
<div class="container">
<input type="radio" id="blue" name="color">
<label for="blue">BLUE</label>
<input type="radio" id="green" name="color">
<label for="green">GREEN</label>
<input type="radio" id="reset" name="color">
<label for="reset">RESET</label>
<div class="tile blue">1</div>
<div class="tile green">2</div>
<div class="tile blue">3</div>
<div class="tile green">4</div>
</div>