JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="block1">
        <div>ЗАГСы</div>
        <div>1</div>
        <div>Подробнее</div>
        <div>тень</div>
    </div>
    <div class="block2">
        <div>статьи</div>
        <div>1</div>
        <div>Подробнее</div>
        <div>тень</div>
    </div>
    <div class="block3">
        <div>оборудование</div>
        <div>1</div>
        <div>Подробнее</div>
        <div>тень</div>
    </div>
    <div class="block4">
        <div>услуги</div>
        <div>1</div>
        <div>Подробнее</div>
        <div>тень</div>
    </div>
</div>

CSS

.block1, .block2, .block3, .block4 {
           width: 230px;
           height: 396px;
           display:inline-table;
           vertical-align: baseline;
           margin: 0 0px;
           position: relative;
           text-align: center;
       }
       .main {
           min-width: 500px;
           margin: 30px auto;
       }
       .main:after {
           display: table;
       }
       .block1 > div:nth-child(1), .block2 > div:nth-child(1), .block3 > div:nth-child(1), .block4 > div:nth-child(1) {
		   background-color: grey;
           height: 54px; 
       } /*верхняя кнопка-название */
       .block1 > div:nth-child(3), .block3 > div:nth-child(3), .block4 > div:nth-child(3) {
           position: absolute;
           background-color: #ccc;
           height: 44px;
           text-align: center;
           bottom: 1px;
           width: 230px;
       } /*нижняя кнопка-подробнее 1-го и 3-го блоков*/
	   
	   .block1 > div:nth-child(2) {
		   margin-top: 20px;
		   background-color:#9FBE94;
           height: 239px;
       } /*картинка ЗАГСы*/
	   .block1 > div:nth-child(4), .block3 > div:nth-child(4) {
		   background-color:#7DB6DB;
           height: 39px;
       } /*картинка с тенью 1-го и 3-го блоков*/

	   .block2 > div:nth-child(2) {
		   margin-top: 20px;
		   background-color:#9FBE94;
           height: 179px;
       } /*картинка СТАТЬИ */
	   .block3 > div:nth-child(2) {
		   margin-top: 20px;
		   background-color:#9FBE94;
           height: 239px;
       } /*картинка ОБОРУДОВАНИЕ*/
	   .block2 > div:nth-child(4), .block4 > div:nth-child(4) {
		   background-color:#7DB6DB;
           height: 39px;
       } /*картинка с тенью 2-го и 4-го блоков*/
	   .block4 > div:nth-child(2) {
		   margin-top: 20px;
		   background-color:#9FBE94;
           height: 179px;
       } /*картинка УСЛУГИ*/
	   
	   .block2 > div:nth-child(3), .block4 > div:nth-child(3) {
           position: absolute;
           background-color: #ccc;
           height: 44px;
 ...