JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div>
 <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div>
 <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div> <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div>
     <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div>
 <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div>
 <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div> <div class="list-view">
        <img [src]="imageUrl" />
        <div class="about">
          <h4>
            <a>{{ title }}</a>
          </h4>
        </div>
        <div class="date">
          <p>{{ date }}</p>
        </div>
    </div>

SCSS

.list-view {
  display: grid;
  grid-template-columns: 300px 45% 1fr 1fr;
  align-items: center;
  height: 100px;

  &:nth-child(odd) {
    background-color: red;
  }

  img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
  }

  .about-event {
    padding-left: 1rem;
  }
}