JSFiddle - React, Tailwind, and code Playground

HTML

<a class="wholediv" href="#">

  <div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="img1">

      <!-- {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }} -->

      <div class="description">
        <p class="title">Title</p>
        <p class="text">Description</p>
        <p class="button hidden-md hidden-sm hidden-xs"><span class="btn btn-outline-small" title="{{ settings.home_blockhtml_buttontxt_1 }}">Button</span></p>
      </div>

    </div>

</div>

</a>

CSS

.text-center {
  background-color: white;
  border: 1px solid black;
  width: 100px;
  height: 100px;
}

.wholediv {
  display: block;
}