JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table borderless">
      <tr>
      <td align="center" width="10%"> <img width="55%" class="img" src="http://placehold.it/350x150"></td>
      <td><h4>Save on Energy Costs</h4>
          <p class="pindent">TEST TEST TEST TEST TEST TEST TEST TEST TEST</p>
      </td>
      </tr>
      <tr>
      <td align="center" width="10%"> <img width="55%" class="img" src="http://placehold.it/350x150"></td>
      <td><h4>Save the Environment</h4>
          <p class="pindent">TEST TEST TEST TEST TEST TEST</p>
         
      </td>
      </tr>
      </table>

CSS

@media (max-width: 600px) {
    table {
        width:95%;
    }
    .custom-box{
        margin-left: 10px;
        margin-right: 10px;
    }
    .margin-box {
        padding-bottom: 10px;
    }
    .cust-box {
    margin-left: 0px;
    }
    .carousel-inner{
     max-height: 500px !important;
    }
    .img {
    max-width: 100% !important;
    height: auto;
    border-radius: 50%;
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -moz-: -moz-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    width:100%!important;
    }
    .img:hover {
    -webkit-transform: rotate(360deg);
    -moz-: rotate(360deg);;
    transform: rotate(360deg);
   
    } 
     td:first-child{width:50%}
}