JSFiddle - React, Tailwind, and code Playground

by Suhaib Janjua

HTML

<div class="first__section">
  <div class="inner">
    <div class="schede__container">
      <div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div>
      
      <div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div><div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
      </div><div class="scheda__realizzazione">
        <div class="div-img">
          <img class="scheda__img" src="http://placehold.it/150x150" alt="">
        </div>
        <div class="scheda__content">
          <h1>test</h1>

          <h2>test</h2>

          <p>LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. MAECENAS SUSCIPIT LIBERO ARCU, EU LAOREET ORCI TINCIDUNT NEC. MORBI NEC JUSTO VEL NULLA SOLLICITUDIN ACCUMSAN VITAE QUIS ENIM.</p>
        </div>
     ...

CSS

.schede__container {
  border-left: 1px solid #343333;
}
.scheda__realizzazione {
  text-align: left;
  display: inline-block;
  margin: 40px 0 40px 20px;
  padding: 40px 0 40px 20px;
  border-bottom: 1px solid #343333;
}
.div-img {
  float: left;
  width: 150px;
}
.scheda__content {
  margin-left: 160px;
}
.scheda__content h1 {
  color: #5C5A5B;
  text-transform: uppercase;
  font-size: 20px;
}
.scheda__content h2 {
  color: #5C5A5B;
  font-size: 20px;
  margin-top: -6px;
}
.scheda__content p {
  color: #5C5A5B;
  text-transform: lowercase;
}
.first__section {
  width: 100%;
  text-align: center;
  background-color: white;
}
.inner {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
}