JSFiddle - React, Tailwind, and code Playground

HTML

<div class="trays">
	<div class="big-tray tray-container green noselect">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
	<div class="small-tray tray-container blue noselect">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
	<div class="small-tray tray-container red noselect">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
	<div class="small-tray tray-container yellow noselect">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
	<div class="small-tray tray-container grey noselect">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
	<div class="small-tray tray-container black noselect">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
	<div class="small-tray tray-container purple selected">
		<div class="tray-count-container">
			<p>4</p>
		</div>
		<hr class="separator">
		<div class="tray-title-container">
			<p class="truncated">Titre</p>
		</div>
	</div>
</div>

SCSS

.trays {
    display: flex;
    margin: 9px;
    flex-wrap: wrap;
    
		.big-tray {
			height: 200px;
		}
		
		.small-tray {
			 height: 150px;
		}
		
    .tray-container {
      position: relative;
      width: 150px;
      color: white;
      overflow: hidden;
      flex-shrink: 0;
      margin-right: 9px;
      margin-bottom: 9px;
      padding: 9px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;

      &:hover {
        cursor: pointer;
      }

      .icon {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 65px;
        opacity: 0.2;
      }

      .separator {
        height: 0px;
        width: 30%;
        border: 1px solid white;
        margin: 9px 0;
      }

      p {
        margin: 0;
      }

      .tray-count-container {
        flex: 1;
        display: flex;
        align-items: flex-end;

        p {
          font-size: 40px;
        }

      }

      .tray-title-container {
        font-size: 16px;
      }
    }
  }
	
.red {
	background-color: red;		
	}
	
	.green {
		background-color: green;
	}
	
	.blue {
		background-color: blue;
	}
	
	.yellow {
		background-color: yellow;
	}
	
	.grey {
		background-color: grey;
	}
	
	.black {
		background-color: black;
	}
	
	.purple {
		background-color: purple;
	}
	
	.selected {
		border: 5px solid pink;
	}