JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<div class="main-content">
  <div class="textdiv">
    <div class="text-content">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>

  <div class="textdiv">
    <div class="text-content">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>

  <div class="textdiv">
    <div class="text-content">
      <h5 class="h5title">Lorem ipsum dolor sit</h5>
      <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
        magna aliquyam erat, sed diam voluptua.</p>
    </div>
    <div class="buttondiv">
      <a href="http://#">Read more</a>
    </div>
  </div>
</div>

CSS

.main-content {
  display: flex;
  display:-webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.text-content {
  padding: 40px;
}

.textdiv {
  margin: 0px 15px;
  font-family: Open sans;
  font-size: 18px;
  background-color: #EFEFEF;
  width: 384px;
  text-align: center;
  margin-top: 5%;
}

.h5title {
  font-weight: bold;
  margin-top: 5%;
  margin-bottom: 5%;
  font-weight: bold;
}

.buttondiv {
  width: 100%;
  background-color: #d2d2d2;
  letter-spacing: 0px;
  color: #222222;
  text-transform: uppercase;
  opacity: 1;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}