JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container page">
          <ul class="hs">
            <li class="item">  <div class="col-lg-3 col-md-4 col-sm-6 ">
              <div class="card border-0" style="width: 15rem;">
                <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
              </div>
            </div>
          </li>
            
          <li class="item">  <div class="col-lg-3 col-md-4 col-sm-6 ">
           <div class="card border-0" style="width: 15rem;">
             <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
           </div>
         </div></li>

         <li class="item">  <div class="col-lg-3 col-md-4 col-sm-6 ">
           <div class="card border-0" style="width: 15rem;">
             <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
           </div>
         </div></li>

        
         <li class="item">  <div class="col-lg-3 col-md-4 col-sm-6 ">
           <div class="card border-0" style="width: 15rem;">
             <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
           </div>
         </div></li>

          
         <li class="item">  <div class="col-lg-3 col-md-4 col-sm-6 ">
           <div class="card border-0" style="width: 15rem;">
             <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
           </div>
         </div></li>
        
          
         <li class="item">  <div class="col-lg-3 col-md-4 col-sm-6 ">
           <div class="card border-0"...

CSS

.page {
width: auto;
margin: auto;
  }


 .hs {
  list-style: none;
  overflow-x: auto;
   white-space: nowrap;
  width: 100%;
  padding: 0 10% 2rem 0%;
 }

  .hs .item {
  display: inline-block;
  width: auto;
 text-align: center;
 margin-right: 0.75rem;
 height: 100%;
white-space: normal;
 }

  ::-webkit-scrollbar {
 height: 15px;
}

::-webkit-scrollbar-track-piece {
 background-color: gray;
}
 .li {
text-decoration: none;
}