JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css">
<!-- Offer Posts -->
<div class="text_container offer-background">
  <div class="offer-posts ">
    <div class="col-md-12 reason">
      <div class="verticalLine"> </div>

      <h1>What we offer</h1>
    </div>
    <div class="text_container">
      <!-- / .row -->
      <div class="row">

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
            <div class="card-block">
              <h3 class="card-title">Postgres Support</h3>
              <p class="card-text module line-clamp">We provide full 24/7 technical support for production PostgreSQL systems for your peace of mind. Let Fujitsu's PostgreSQL experts resolve your database problems while you focus on what you do best....
              </p>
              <a href="#" class="btn btn-explore text-left">explore</a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
            <div class="card-block">
              <h3 class="card-title">Services</h3>
              <p class="card-text module line-clamp ">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-explore">explore</a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="card">
            <img class="card-img-top" src="https://placeimg.com/500/300/any" data-src="..." alt="Card image cap">
            <div class="card-block">
              <h3 class="card-title">Trainning</h3>
              <p class="card-text module line-clamp">Some quick example text to build on the card title and...

CSS

/* ===== offer Posts ===== */
 
 .offer-background {
   background-color: #f7f9f8;
 }
 
 .card {
   background-color: #ffffff;
   margin-top: 30px;
   margin-bottom: 40px;
   content: "";
   max-width: 314px;
   height: 467px;
   position: relative;
   display: table;
 }
 
 .card img {
   width: 100%;
 }
 
 .card-title {
   line-height: 1.5;
   margin-top: 0;
 }
 
 .card-block {
   padding: 5px;
 }
 
 .card-text {
   font-size: 20px;
   padding-top: 20px;
 }
 
 .card-text p {
   line-height: 1.7;
   font-size: 10px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-align: left!important
 }
 
 .right-pad {
   /*        padding-left: 10px;
*/
 }
 
 .module {
   width: 314px;
   margin: 0 0 1em 0;
   overflow: hidden;
 }
 
 .module p {
   margin: 0;
 }
 
 .line-clamp {
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
 }
 /**/