HTML
<div class="flex numbers">
<div class="alert text-center uppercase pl-sg">
<h3>Complete</h3>
</div>
<div class="block bShadow-1"></div>
<div class="block bShadow-2"></div>
<div class="block bShadow-3"></div>
<div class="block bShadow-4"></div>
<div class="block bShadow-5"></div>
<div class="block bShadow-6"></div>
<div class="block bShadow-7"></div>
<div class="block bShadow-8"></div>
<div class="block bShadow-9"></div>
<div class="block bShadow-10"></div>
<div class="block bShadow-11"></div>
<div class="block bShadow-12"></div>
<div class="alert text-center uppercase pl-sg">
<h3>Upper shadow</h3>
</div>
<div class="block bShadow-13"></div>
<div class="block bShadow-14"></div>
<div class="block bShadow-15"></div>
<div class="block bShadow-16"></div>
<div class="block bShadow-17"></div>
<div class="block bShadow-18"></div>
<div class="block bShadow-19"></div>
<div class="block bShadow-20"></div>
<div class="alert text-center uppercase pl-sg">
<h3>Angle</h3>
</div>
<div class="block bShadow-21"></div>
<div class="block bShadow-22"></div>
<div class="block bShadow-23"></div>
<div class="block bShadow-24"></div>
<div class="block bShadow-25"></div>
<div class="block bShadow-26"></div>
<div class="block bShadow-27"></div>
<div class="block bShadow-28"></div>
<div class="block bShadow-29"></div>
<div class="block bShadow-30"></div>
<div class="block bShadow-31"></div>
<div class="block bShadow-32"></div>
<div class="block bShadow-33"></div>
<div class="block bShadow-34"></div>
<div class="block bShadow-35"></div>
<div class="block bShadow-36"></div>
<div class="block bShadow-37"></div>
<div class="block bShadow-38"></div>
<div class="block bShadow-39"></div>
<div class="block bShadow-40"></div>
<div class="block bShadow-41"></div>
<div class="block bShadow-42"></div>
<div class="alert text-center uppercase pl-sg">
<h3>Down</h3>
</div>
<div class="block bShadow-43"></div>
<div class="block bShadow-44"></div>
<div class="block bShadow-45"></div>
<div class="block bShadow-46"></div>
<div class="block bShadow-47"></div>
<div class="block bShadow-48"></div>
<div class="block bShadow-49"></div>
<div class="alert text-center uppercase pl-sg">
<h3>Blur collection</h3>
</div>
<div class="block bShadow-50"></div>
<div class="block bShadow-51"></div>
<div class="block bShadow-52"></div>
<div class="block bShadow-53"></div>
<div class="block bShadow-54"></div>
<div class="block bShadow-55"></div>
<div class="block bShadow-56"></div>
<div class="block bShadow-57"></div>
<div class="alert text-center uppercase pl-sg">
<h3>Side shadows</h3>
</div>
<div class="block bShadow-58"></div>
<div class="block bShadow-59"></div>
<div class="block bShadow-60"></div>
<div class="block bShadow-61"></div>
<div class="block bShadow-62"></div>
<div class="alert text-center uppercase pl-sg">
<h3>UpDown shadow</h3>
</div>
<div class="block bShadow-63"></div>
<div class="block bShadow-64"></div>
</div>
CSS
:root {
--primary-color: rgb(81, 204, 226);
}
.blocks, .flex {
position: relative;
display: block;
padding: 0;
margin: 0 auto;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
counter-reset: figures;
}
.block {
position: relative;
background-color: white;
color: rgb(81, 204, 226);
width: 200px;
height: 200px;
line-height: 200px;
color: var(--primary-color);
font-weight: bold;
font-size: 1.25rem;
text-align: center;
margin: 40px 30px;
}
.flex .block {
counter-increment: figures;
}
.flex .block:before {
content: 'bShadow-' counter(figures);
}
.pl-sg {
color: #959da5;
}
.alert {
display: block;
width: 100%;
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border-bottom: 1px solid #ddd;
border-radius: .25rem;
}
{ } JS
Preview