JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="footer">
    <div class="row justify-content-center">
        <div class="container">
           <div class=""> 
                @foreach($logo as $l)
                    <!--<div class="footercar" style="margin:6px;">-->
                    <!--    <img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">-->
                    <!--</div>-->
                    <table class="footercar">
                        <tr>
                            <td>
                                <img class="" src="https://partners.hotelstore.co.ke/public{{ $l->company_logo }}" style="width:150px; height:100px;">
                            </td>
                        </tr>
                    </table>
        @endforeach
        </div>
        </div>
    </div>
    <div class="mytext">
        <p class="footertext">&copy; Copyright <?php //echo date("Y"); ?> Hotel Store Partners</p>
    </div>
</div>

CSS

.footer{
  position: fixed;
  height:150px;
  bottom: 0px;
  width: 100%;
  background-color: #DCDCDC;
  text-align:  center;
  margin-top:-200px;
}
.footercar{
  background-color:rgb(220,220,220);
  animation: moveImage 3s linear infinite;
  display:inline;
  left: -350px;
}
.footerminicar{
  padding: 2px 16px; 
}
@keyframes moveImage {
  
0{
   transform: translateX(calc(0vw + 350px));
}
 100% {
  transform: translateX(calc(100vw + 350px));
}
}
.footertext{
 font-size:14px;
 color:#000000;
}