JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div id="services">
      <div class="container-grid">
        <div class="service1">
          <div class="topsection1">
          </div>
          <h1>
          בניית אפלקציות
          </h1>
          <p>בניית אפליקציות הוא חלק מהשירות ש Designer מציע, כחלק ממגוון האופציות הקיימות.</p>
          <p>בניית אפליקציה כרוכה בתשלום נוסף, אך לחדשנות אין מחיר.</p>
        </div>
        <div class="service2">
          <div class="topsection2">
          </div>
          <h1>
          שירות מלא
          </h1>
          <p>תמיד איתך, בכל זמן, שירות מלא ותומך בכל הדרך ללא התפשרות</p>
        </div>
        <div class="service3">
          <div class="topsection3">
          </div>
          <h1>
          יצירתיות חוצה גבולות
          </h1>
          <p>מקוריות היא ערך הדגל שלנו, כל תוכן שונה מהשני.</p>
        </div>
      </div>
    </div>

CSS

#services {
  padding-top: 100px;
  background-color: #000;
  height: 600px;
  padding-bottom: 10px;
  z-index: 0;
}


.container-grid {
    margin-left: 17%;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, 350px);
    grid-template-rows: repeat(2, 400px);
}
.service1 , .service2, .service3 {
  display: inline-block;
	vertical-align: top;
}
.service1 {
  background-color: #f7f7f7;
  direction: rtl;
  border: 2px #40A39B #000;
  min-width: auto;
  max-width: 800px;
  max-height: 400px;
  min-height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.08);
  border-radius: 25px;
  background-image: url('../images/infobg1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.service2 {
  background-color: #f7f7f7;
  direction: rtl;
  border: 2px #40A39B #000;
  min-width: auto;
  max-width: 800px;
  max-height: 400px;
  min-height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.08);
  border-radius: 25px;
  background-image: url('../images/infobg2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.service3 {
  background-color: #f7f7f7;
  direction: rtl;
  border: 2px #40A39B #000;
  min-width: auto;
  max-width: 800px;
  max-height: 400px;
  min-height: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.08);
  border-radius: 25px;
  background-image: url('../images/infobg3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.topsection1{
  margin-left: auto;
  margin-right: auto;
  background-image: url('../images/application.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  height: 150px;
  width: 250px;
}
.topsection2{
  margin-left: auto;
  margin-right: auto;
  background-image: url('../images/service.png');
  background-repeat: no-repeat;
  background-size:...