JSFiddle - React, Tailwind, and code Playground

by Jefferson Alison Alves

HTML

<section class="corpo-1">
  <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

  <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
    <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

  <hr class="linha-titulo">
  <!-- <img src="images/logo-transp.png" /> -->
  <ul class="info">
    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>
  </ul>

  <button id="btn-info">leia mais ...</button>

</section>

CSS

ul li {
  list-style-type: none;
}
.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info {
  text-align: center;
}
.info li {
  float: left;
  width: 33%;
}
.info li img {}
#btn-info{
    border:3px solid #000;
    border-radius: 5px;
    width: 220px;
    height: 50px;
    text-align: center;
    font-family: Gabriola;
    font-size: 1.5em;
    color: #000;
    background: transparent;
    cursor: pointer;
    clear: both;
    display: block;
    margin: 5% auto 0;
}

#btn-info:hover{
    background: #000;
    color: #fff;
}