<input id="diary" type="checkbox">
<input id="mystuff" type="checkbox">
<div class="main-container">
  <label class="icon file" for="diary" title="file">
    <span class="material-icons">
      insert_drive_file
    </span>
    <small> Diary.txt </small>
  </label>
  <label class="icon file" for="mystuff" title="folder">
    <span class="material-icons">
      folder
    </span>
    <small> MyStuff </small>
  </label>

  <div class="window diary">
    <div class="handle"><span> Diary.txt </span>
            <label class="close-button" for="diary">x</label>
    </div>
    <div class="content" contenteditable>
      <h1> Dear Diary </h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse officiis expedita eius hic porro odit rerum fugit fugiat perspiciatis, placeat velit alias, voluptatem cumque laboriosam unde aperiam blanditiis ratione quisquam!
      Minima, excepturi. Modi tempora maxime nobis provident laudantium fuga consequatur perspiciatis dolorum deleniti hic illum nemo sunt aperiam amet dolorem, sapiente natus delectus nesciunt est accusantium. Soluta quo tenetur repellendus?
      </p>
    </div>
  </div>
  <div class="window mystuff">
    <div class="handle"> <span> MyStuff </span>
      <label class="close-button" for="mystuff">x</label>
    </div>
    <div class="content">
       <label class="icon file" title="folder">
    <span class="material-icons">
      folder
    </span>
    <small> OtherStuff </small>
  </label>
       <label class="icon file" title="folder">
    <span class="material-icons">
      folder
    </span>
    <small> Images </small>
  </label>
       <label class="icon file" title="folder">
    <span class="material-icons">
      folder
    </span>
    <small> Videos </small>
  </label>
    </div>
  </div>
</div>

*{
  box-sizing: border-box;
}
html{
  width: 100%;
  height: 100%;
}
body{
  color: #ddd;
  margin: 0px!important;
  border: none;
  padding: 0px;
  background-color: teal;
  padding: 20px;
  position: relative;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: sans;
}
body>input{
  display: none;
}
.main-container{
  display: flex; 
}

.file{
  color: #FFE082;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}
.file .material-icons{
  font-size: 48px;
}
.file small{
  width: 100%;
  font-size: 12px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
}

.window {
  position: fixed;
  width: 300px;
  background-color: #ddd;
  color: #000;
  font-size: 14px;
  border: 2px inset #999;
}
.window {
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  top: 30px;
  left: 30px;
  transition: all .2s ease-in-out;
  transform-origin: 0% 0%;
}
.window .handle {
  display: flex;
  justify-content: space-between;
  height: 24px;
  width: calc( 100% + 4px);
  padding: 3px;
background: rgb(37,106,134);
background: linear-gradient(90deg, rgba(37,106,134,1) 0%, rgba(120,200,255,1) 100%);
  margin: -2px 0 0 -2px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  border: 2px outset #999;
}

.window .content{
    padding: 10px;
}

.window .handle .close-button {
    background-color: red;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 18px;
    vertical-align: middle;
    margin-top: -5px;
    border: 2px outset #999;
    font-size: 16px;
    margin-right: -5px;
    cursor: pointer;  
}

#diary:checked~.main-container .diary {
  transform: scale(1);
  opacity: 1;
  pointer-events: all;
}

#mystuff:checked~.main-container .mystuff {
  transform: scale(1);
  opacity: 1;
  pointer-events: all;
}