JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<div class="conteiner">
    <div class="row">
        
        <div class="block-number">
            <div class="block">
              <div class="block-bg">
                <!-- Image -->
                <div class="block-image ags">
                        <img src="/images/image1.jpg" alt="" title="">
                </div>

                <!-- Title -->
                <div class="block-title">
                    <h3>Aenean nec sem vestibulum</h3>
                </div>

                <!-- Announce -->
                <div class="block-announce">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac.
                </div>
               </div>
            </div>
        </div>
        
        <div class="block-number">
                <div class="block" style="background: linear-gradient(45deg, rgb(255, 255, 255), rgb(255, 255, 255));">
                        <!-- Image -->
                        <div class="block-image">
                                <img src="/images/icon1.png" alt="" title="">
                        </div>
        
                        <!-- Title -->
                        <div class="block-title ">
                                <h3 style="color: rgb(79, 78, 77);">Aenean nec sem vestibulum</h3>
                        </div>
        
                        <!-- Announce -->
                        <div class="block-announce" style="color: rgb(171, 171, 171);">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut diam ac felis placerat consequat in vitae justo. Curabitur porta et dolor ac. Morbi quis elementum ipsum
                        </div>
                </div>
        </div>
        <div class="block-number">
                <div class="block aps">
                        <!-- Image -->
                        <div class="block-image">
                      ...

CSS

@import url('https://fonts.googleapis.com/css?family=Sarabun:800');
@import url('https://fonts.googleapis.com/css?family=Asap');
body {
  background: #fff;
}
.conteiner {
  width: 1170px;
  margin: 0 auto;
}
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.block-number {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.block {
  line-height: 23px;
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
  border: 1px solid #d0c5c5;
  border-radius: 10px;
margin-top: 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.29);
}

div.block-number:nth-child(1) .block:hover{
    border:5px solid;
}
.block-image {
  width: 95%;
  margin: 0 auto;
  position: relative;
  top: 10px;
  text-align: center;
}
.block-image img {
  width: 100%;
  border-radius: 10px 10px 0 0px;
}
.block-title h3 {
  font-family: 'Sarabun', sans-serif;
  padding: 0px 10px;
  color: #4f4e4d;
}
.block-announce {
  font-family: 'Asap', sans-serif;
  padding: 0px 10px;
  margin: 0px 0px 30px 0px;
  color: #ababab;
}
.aps {
  background: linear-gradient(45deg, #3117ceb3, #3117ceb8), url(/images/ruka.jpg); 
}
div.block-number:nth-child(3) .block-announce,
div.block-number:nth-child(2) .block-announce {
  text-align: center;
}
div.block-number:nth-child(2) h3,
div.block-number:nth-child(3) h3 {
  text-align: center;
}
div.block-number:nth-child(3) h3 {
  color: #fff;
}