:root { --tile-color: #36c30023; --function-tile-color: #c300d223; } body { margin: 30px; } form button, nav ul > li { margin: 5px; } .tile-list, nav ul { list-style: none; padding: 0; } nav ul > li { display: inline-block; border-radius: 6px; background-color: var(--function-tile-color); padding : 10px; } .tile { display: inline-flex; flex-direction: column; align-content: stretch; align-items: stretch; justify-content: center; border-radius: 6px; background-color: var(--tile-color); box-shadow: 0 0 3px #c3c3c3; margin: 30px 30px 0 5px; width: 200px; height: 200px; text-align: center; } .tile > label, .tile > * { flex: 1 1 auto; } .tile-content { flex: 1 1 auto; display: flex; justify-content: center; flex-direction: column; align-content: stretch; align-items: stretch; } .tile-content * { flex: 1 1 auto; display: inline-block; width: 100%; justify-content: center; flex-direction: column; align-content: stretch; align-items: stretch; margin: 0; padding: 0; } .tile input[type="checkbox"] { display: none; } .tile input[type="checkbox"] + * { display: none; opacity: 0; transition: opacity 0.5s; } .tile input[type="checkbox"]:checked + * { display: inline-block; opacity: 1; transition: opacity 0.5s; } .function { background-color: var(--function-tile-color); } .tile-list + * { margin-top: 30px; } hr { margin-top: 30px; }